/* 基本布局 */
*{box-sizing:border-box;margin:0;padding:0;font-family:Arial, Helvetica, sans-serif}
body,html,#map{height:100%}
header{background:#0078d7;color:#fff;padding:12px 16px}
header h1{font-size:18px}
.app{display:flex;height:calc(100vh - 56px)}
.sidebar{width:320px;background:#f7f7f7;border-right:1px solid #e0e0e0;padding:12px;overflow:auto}
.map-wrap{flex:1; position:relative} /* 修改：确保有定位上下文 */
.map{width:100%;height:100%}
.controls{margin-bottom:12px}
.controls label{display:block;margin-bottom:6px;font-weight:600}
.controls .row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
#addressInput{width:100%;padding:10px 12px;margin-bottom:8px;border:1px solid #d0d0d0;border-radius:6px;box-shadow:inset 0 1px 2px rgba(0,0,0,0.03)}
.controls button{display:inline-block;padding:8px 10px;margin-right:6px;border:none;background:#0078d7;color:#fff;border-radius:6px;cursor:pointer}
.controls select{padding:6px;border-radius:6px;border:1px solid #ccc;background:#fff}
.controls button#clearBtn{background:#6c6c6c}

/* 小型动作按钮 */
.mini-btn{padding:6px 8px;font-size:13px;background:#00a0ff}
.mini-btn[disabled]{opacity:0.6}
.results h2{font-size:14px;margin:8px 0}
.results #hospList{list-style:none}
.results #hospList li{padding:10px;border-bottom:1px solid #eef0f2;display:flex;align-items:center;justify-content:space-between;gap:8px}
.hospital-info{flex:1}
.hospital-meta{font-size:13px;color:#666;margin-top:6px}
.meta-badge{display:inline-block;background:#f0f6ff;color:#0366d6;padding:4px 8px;border-radius:12px;font-size:12px;margin-left:8px}
.results #hospList li.best{background:linear-gradient(90deg,#fffaf0,#fff7e6);border-left:4px solid #ff9800}
.results #hospList li button{flex:0 0 auto;padding:6px 10px;border-radius:6px;border:none;background:#0078d7;color:#fff}
.results #hospList li .locate-btn{background:#06c;margin-right:8px}
.footnote{font-size:12px;color:#666;margin-top:8px}

/* 路线详情面板 */
.route-details{margin-top:12px;padding:10px;border:1px solid #e8e8e8;border-radius:8px;background:#fff}
.route-details h3{margin-bottom:8px;font-size:15px}
.route-details .route-steps{max-height:160px;overflow:auto;border-top:1px dashed #eee;margin-top:8px;padding-top:8px}
.route-steps .step{padding:6px 0;border-bottom:1px solid #f3f3f3;font-size:13px}
.route-summary-item{font-size:14px;margin-bottom:6px}
.route-actions{display:flex;gap:8px;align-items:center;margin-top:8px}
.route-actions select{padding:6px;border-radius:6px}
.route-actions button{background:#0b74de;border:none;color:#fff;padding:6px 10px;border-radius:6px;cursor:pointer}
.hidden{display:none}

/* 策略说明 */
.strategy-info{margin-top:10px;padding:8px;border-radius:6px;background:#f5fbff;border:1px solid #e6f2ff;font-size:13px;color:#03396b}
.strategy-info .title{font-weight:600;margin-bottom:6px}
.strategy-info .desc{font-size:13px}

/* 策略徽章与示意图 */
.strategy-info .strategy-row{display:flex;gap:10px;align-items:center}
.strategy-info .strategy-badge{width:12px;height:12px;border-radius:3px;flex:0 0 auto}
.strategy-info .strategy-body{flex:1}
.strategy-info .illustration{margin-top:8px}
.strategy-info svg{width:100%;height:40px}
.strategy-info .legend-note{font-size:12px;color:#555;margin-top:6px}

/* spinner */
.spinner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.65);color:#fff;padding:12px 18px;border-radius:8px;font-weight:600;z-index:1000}
.hidden{display:none}

.legend{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,0.95);padding:8px;border-radius:6px;border:1px solid #e6e6e6;font-size:13px;z-index:500}
.legend .dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px}
.legend .incident{background:#ff3b30}
.legend .hospital{background:#0078d7}
.legend .route{background:#0091ff}

/* API 错误面板 */
.api-error{margin-top:8px;padding:10px;border-radius:6px;background:#fff5f5;border:1px solid #ffd6d6;color:#b30000;white-space:pre-wrap;font-size:13px}
.results #hospList li.hosp-item.selected{background:linear-gradient(90deg,#e6f7ff,#f0fbff);border-left:4px solid #0091ff}

/* Canvas 分层，用于自定义叠加绘制（不阻塞地图交互） */
.map-canvas-layer{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	pointer-events:none; /* 允许事件穿透到地图 */
	z-index:3200; /* 在地图之上，UI 控件之下（可按需调整） */
}
.map-canvas-layer canvas{
	display:block;
	width:100%;
	height:100%;
}

/* QGIS 激活时在地图上添加轻量色彩叠加，提示当前使用 QGIS 底图 */
.map-wrap.qgis-active::after{
	content: "";
	position: absolute;
	inset: 0;
	/* 绿色系轻量叠加，可按需修改颜色/透明度 */
	background: rgba(34,139,34,0.06);
	pointer-events: none;
	z-index: 3300; /* 在地图上方，canvas 层之上，UI 之下（可按需调整） */
}

/* 可选：当 QGIS 激活时微调图例边框颜色以匹配底色 */
.map-wrap.qgis-active .legend {
	border-color: rgba(34,139,34,0.12);
}