:root{
    --bg:#020617;
    --panel2:#0f172a;
    --accent:#22c55e;
    --accentSoft:#bbf7d0;
    --border:#1e293b;
    --txt:#e5e7eb;
    --muted:#9ca3af;
  }
  *{box-sizing:border-box;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
  html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--txt);overflow:hidden;}
  #app{display:flex;height:100vh;}

  #sidebar{
    width:360px;max-width:100%;
    background:linear-gradient(to bottom right,#020617,#0b1120);
    border-right:1px solid var(--border);
    padding:12px 14px;
    display:flex;flex-direction:column;gap:10px;
  
    overflow-y:auto; overflow-x:hidden; height:100vh; min-height:0; overscroll-behavior:contain;}
  #map{flex:1;position:relative;min-height:100vh;}
  #mapStatsOverlay{
    position:absolute;left:10px;bottom:48px;
    background:#020617dd;border:1px solid #1f2937;border-radius:6px;
    padding:4px 6px;font-size:11px;color:#e5e7eb;
    max-width:260px;white-space:pre-line;z-index:500;
  }

  .logo-row{display:flex;align-items:center;gap:8px;margin-bottom:4px;justify-content:flex-end;}
  .logo-main{height:45px;object-fit:contain;}
  .logo-upm{height:45px;object-fit:contain;}
  h1{font-size:18px;margin:2px 0 4px;display:flex;align-items:center;gap:6px;}
  h1 span.logo-dot{
    width:10px;height:10px;border-radius:999px;
    background:var(--accent);box-shadow:0 0 10px var(--accent);
  }
  .sub{font-size:11px;color:var(--muted);margin-bottom:6px;}
  .card{
    background:var(--panel2);
    border-radius:10px;border:1px solid var(--border);
    padding:8px 10px;margin-bottom:4px;
  }
  .card h2{font-size:13px;margin:0 0 4px;}
  label{font-size:11px;color:var(--muted);display:block;margin-bottom:2px;}
  input[type="file"],select,input[type="number"]{
    width:100%;background:#020617;border-radius:6px;
    border:1px solid #1f2937;color:var(--txt);
    font-size:12px;padding:4px 6px;
  }
  .row{display:flex;gap:6px;}
  .row>*{flex:1;}
  button{
    border-radius:999px;border:1px solid #22c55e55;
    background:var(--accent);color:#022c22;
    font-weight:600;font-size:12px;
    padding:6px 10px;cursor:pointer;
    display:inline-flex;align-items:center;gap:4px;
  }
  button.secondary{background:transparent;color:var(--accentSoft);border-color:#374151;}
  button:disabled{opacity:.4;cursor:not-allowed;}
  .pill{
    display:inline-flex;align-items:center;gap:4px;
    font-size:10px;border-radius:999px;
    padding:2px 6px;background:#020617;
    border:1px solid #1e293b;color:var(--muted);
  }
  #statusText{font-size:11px;color:var(--muted);}
  #statsBox{font-size:11px;color:var(--muted);white-space:pre-line;max-height:220px;overflow:auto;}
  .legend-label{font-size:11px;margin-bottom:4px;text-align:center;}
  .manual-breaks{display:flex;gap:4px;margin-top:4px;}
  .manual-breaks input{font-size:11px;padding:2px 4px;}

  .leaflet-control-layers-expanded{
    background:#020617dd;color:#e5e7eb;border-radius:8px;border:1px solid #1f2937;
  }

  /* Bagi semua imageOverlay (IDW raster) keluar tajam, tak blur */
.leaflet-image-layer {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}




/* ===== FIX: Ensure IDW raster overlay never blocks point clicks/popup ===== */
.leaflet-image-layer{
  pointer-events: none !important;
}

/* ===== AOI / Polygon name label (always visible on map) ===== */
.aoi-name-label{
  pointer-events:none;
  background: rgba(2,6,23,0.78);
  border: 1px solid rgba(250,204,21,0.65);
  color: #f9fafb;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.28);
  transform: translate(-50%,-50%);
}


  
/* ===== WORKING SIDEBAR TOGGLE (MINIMAL, SAFE) ===== */
#sidebar{
  transition: width 0.25s ease, padding 0.25s ease;
}

#sidebar.is-hidden{
  width:0 !important;
  min-width:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
  overflow:hidden;
}

#sidebarToggle{
  position:fixed;
  top:50%;
  left:360px;
  transform:translateY(-50%);
  width:36px;
  height:80px;
  background:#facc15;
  color:#020617;
  border:none;
  border-radius:0 12px 12px 0;
  font-size:26px;
  font-weight:800;
  cursor:pointer;
  z-index:99999;
}

body.sidebar-hidden #sidebarToggle{
  left:0;
}

/* @media print (legacy full-page map) removed to avoid conflict with #printReport */
/* === SAFE MINIMIZE BUTTON (CSS-ONLY, MAP SAFE) === */
.card.collapsed > :not(h2){
  display:none;
}
.card h2{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.min-btn{
  background:transparent;
  border:none;
  color:#facc15;
  font-size:14px;
  cursor:pointer;
}

  /* ===== PRINT BUTTON (under Leaflet Draw delete) ===== */
  .leaflet-draw-toolbar a.leaflet-draw-draw-print{
    background-image:none !important;
    font-size:18px;
    line-height:30px;
    text-align:center;
  }

  /* ===== Surface Probe (IDW) ===== */
  #surfaceProbePanel{
    position:absolute;
    right:10px;
    bottom:10px;
    z-index:650;
    width:320px;
    max-width:calc(100vw - 20px);
    background:#020617ee;
    border:1px solid #1f2937;
    border-radius:10px;
    padding:8px 10px;
    font-size:11px;
    color:#e5e7eb;
    display:none;
    box-shadow:0 8px 22px rgba(0,0,0,.35);
  }
  #surfaceProbePanel .title{
    display:flex;align-items:center;justify-content:space-between;
    gap:8px;margin-bottom:6px;
  }
  #surfaceProbePanel .title b{font-size:12px;}
  #surfaceProbePanel .btnrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
  #surfaceProbePanel button{
    border-radius:999px;border:1px solid #334155;
    background:transparent;color:#bbf7d0;
    font-weight:700;font-size:11px;padding:5px 10px;
    cursor:pointer;
  }
  #surfaceProbePanel button.primary{background:var(--accent);color:#022c22;border-color:#22c55e55;}
  #surfaceProbePanel .kv{display:flex;justify-content:space-between;gap:10px;margin:2px 0;}
  #surfaceProbePanel .muted{color:#9ca3af;font-size:10px;margin-top:2px;}
  #surfaceProbePanel .swatch{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;border:1px solid #0b132b;}
  .probe-cursor{cursor:crosshair !important;}

  /* ===== Pinned point icon (teardrop pin) ===== */
  .pin-icon{
    width:18px;height:18px;
    background: var(--pinfill, #22c55e);
    border:2px solid #facc15;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,.45);
  }
  .pin-icon:after{
    content:'';
    width:6px;height:6px;
    background:#020617;
    border-radius:50%;
    position:absolute;
    top:50%;left:50%;
    transform: translate(-50%,-50%) rotate(45deg);
    opacity:0.85;
  }
  .leaflet-marker-icon.pin-wrap{ background:transparent; border:none; }



  /* ===== Pinned points UI ===== */
  #surfaceProbePanel select{
    width:100%;
    background:#020617;
    border:1px solid #1f2937;
    color:#e5e7eb;
    border-radius:8px;
    padding:6px 8px;
    font-size:11px;
    outline:none;
  }
  #surfaceProbePanel button:disabled{opacity:.45;cursor:not-allowed;}


  /* ===== Zone Callout (click+drag) ===== */
  #zoneCallout{
    position:absolute;
    z-index:700;
    min-width:220px;
    max-width:320px;
    background:#ffffff;
    color:#0b132b;
    border:2px solid #0b132b;
    border-radius:10px;
    padding:10px 12px;
    font-size:14px;
    font-weight:800;
    line-height:1.25;
    display:none;
    box-shadow:0 10px 26px rgba(0,0,0,.35);
    pointer-events:none; /* let mouse pass through */
  }
  #zoneCallout .small{font-size:13px;font-weight:800;}



/* ===== Print Report Layout (SoilProp style) ===== */
#printReport{display:none;}
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body * { visibility: hidden !important; }

  #printReport, #printReport * { visibility: visible !important; }
  #printReport{
    display:block !important;
    position: fixed !important;
    inset: 0 !important;
    background: #ffffff !important;
    color:#111827 !important;
    font-family: Arial, Helvetica, sans-serif !important;
  }
  #prWrap{
    display:grid !important;
    grid-template-rows: 64px 1fr 28px !important;
    height: 100% !important;
    width: 100% !important;
    gap: 8px !important;
    padding: 0 !important;
  }
  #prHeader{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 6px 10px !important;
  }
  #prHeader .left{
    display:flex !important; align-items:center !important; gap:10px !important;
  }
  #prTitle{
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: .4px !important;
  }
  #prSubtitle{
    font-size: 11px !important;
    color:#374151 !important;
    margin-top:2px !important;
  }
  #prBody{
    display:grid !important;
    grid-template-columns: 1fr 320px !important;
    gap: 10px !important;
    padding: 0 10px !important;
    align-items: stretch !important;
  }
  #prMapFrame{
    border: 1px solid #d1d5db !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    position: relative !important;
    background:#fff !important;
  }
  #prMapFrame #map{
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
  }
  #prNorth{
    position:absolute !important;
    left: 10px !important;
    top: 10px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,.92) !important;
    border: 1px solid #e5e7eb !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-weight:800 !important;
    color:#111827 !important;
  }
  #prNorth:before{
    content:"▲" !important;
    display:block !important;
    line-height: 1 !important;
    transform: translateY(-1px) !important;
  }
  #prNorth span{ display:none !important; }

  #prSide{
    border: 1px solid #d1d5db !important;
    border-radius: 10px !important;
    padding: 10px !important;
    overflow: hidden !important;
  }
  #prBoxTitle{
    font-size: 12px !important;
    font-weight: 800 !important;
    color:#111827 !important;
    margin: 0 0 6px 0 !important;
  }
  #prLegendHost .info.legend{
    box-shadow:none !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 8px !important;
    background: #ffffff !important;
    color:#111827 !important;
  }
  #prStatsHost{
    margin-top: 10px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    padding: 8px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    max-height: 55vh !important;
    overflow: hidden !important;
  }
  #prFooter{
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    padding: 0 10px !important;
    border-top: 1px solid #e5e7eb !important;
    font-size: 10px !important;
    color:#374151 !important;
  }
  /* Hide Leaflet UI overlays in print for cleaner report */
  .leaflet-control-container { display:none !important; }
}