html, body { margin:0; padding:0; height:100%; font-family:Arial, sans-serif; }
.wb-topbar { height:42px; display:flex; align-items:center; gap:18px; padding:0 10px; border-bottom:1px solid #ddd; background:#fff; }
.wb-topbar a { color:#064f8a; text-decoration:none; }
.wb-layout { display:grid; grid-template-columns: 1fr 360px; height:calc(100vh - 43px); }
#map { width:100%; height:100%; background:#eef1f4; }
.wb-panel { padding:12px; overflow:auto; border-left:1px solid #ddd; background:#fff; }
.wb-panel h3 { margin:10px 0 8px; }
.wb-section { margin:8px 0; padding-bottom:8px; border-bottom:1px solid #eee; }
.wb-section.small button { margin:2px 2px 4px 0; }
.tool-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
button { padding:6px 8px; cursor:pointer; border:1px solid #999; background:#f7f7f7; border-radius:3px; }
button.active, .tool.active { background:#0b68a8; color:white; border-color:#0b68a8; }
button.danger { border-color:#b83b37; color:#b83b37; }
button.danger.active { background:#b83b37; color:white; }
.wb-form label { display:block; font-size:13px; margin-top:8px; }
.wb-form input, .wb-form select { width:100%; box-sizing:border-box; padding:7px; margin-top:3px; border:1px solid #aaa; }
#nodeInfo, #linkInfo { font-size:14px; line-height:1.45; border:1px solid #eee; padding:8px; min-height:70px; background:#fcfcfc; }
#logBox { background:#111; color:#c9f7c9; min-height:170px; max-height:280px; overflow:auto; padding:10px; white-space:pre-wrap; font-size:12px; }
.node-marker { width:22px; height:22px; border-radius:50%; border:2px solid #222; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:bold; box-shadow:0 1px 4px rgba(0,0,0,0.4); }
.node-START { background:#62c8dc; }
.node-RESERVOIR { background:#f0c15a; }
.node-IRRIGATION { background:#62c96c; }
.node-DOMESTICINDUSTRIAL { background:#8e79e6; }
.node-CONFLUENCE { background:#2f7fb8; color:white; }
.node-GROUNDWATER { background:#9b8b6f; }
.node-DIVERSION { background:#d95f59; }
.node-LOWFLOW { background:#34c36b; }
.node-END { background:#999; }
.node-label { color:#9b1111; font-weight:bold; font-size:12px; text-shadow:1px 1px 2px white, -1px -1px 2px white; }
.leaflet-marker-draggable .node-marker { outline:3px solid rgba(0,100,255,0.35); }
@media (max-width: 900px) { .wb-layout { grid-template-columns:1fr; grid-template-rows:60vh auto; height:auto; } #map { height:60vh; } .wb-panel { border-left:0; border-top:1px solid #ddd; } }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.wb-form.compact label { font-size:12px; }
.wb-section.no-border, .no-border { border-bottom:0; }
.hint { font-size:12px; color:#666; line-height:1.35; background:#fff9df; padding:6px; border:1px solid #eadf9d; }
#editNodeOrder[readonly] { background:#f2f2f2; color:#555; }

.status-box { margin: 6px 0 10px; padding: 8px; border: 1px solid #b7d7f0; background: #eef8ff; color: #064f8a; border-radius: 4px; font-size: 13px; line-height: 1.35; }
.status-box.ok { border-color:#94d39a; background:#eefcef; color:#176b1f; }
.status-box.err { border-color:#e0a0a0; background:#fff2f2; color:#9b1111; }
.status-box.warn { border-color:#f0d083; background:#fff8df; color:#805700; }

/* v4.7 workflow additions */
.scenario-switch { display:flex; align-items:center; gap:6px; margin:0; }
.scenario-switch label { font-size:13px; color:#444; }
.scenario-switch input { width:70px; padding:4px 6px; border:1px solid #aaa; border-radius:3px; }
.scenario-switch button { padding:4px 8px; }
.validation-box { border:1px solid #ddd; background:#fafafa; max-height:190px; overflow:auto; padding:6px; font-size:12px; line-height:1.35; }
.validation-item { margin:4px 0; padding:5px 6px; border-radius:3px; border-left:4px solid #777; background:#fff; }
.validation-item.error { border-left-color:#b83b37; background:#fff2f2; color:#8c1111; }
.validation-item.warning { border-left-color:#d59a00; background:#fff9e8; color:#6e4b00; }
.validation-item.info { border-left-color:#1b75bb; background:#eef7ff; color:#064f8a; }
@media (max-width: 900px) { .wb-topbar { flex-wrap:wrap; height:auto; min-height:42px; padding:6px 10px; } .wb-layout { height:auto; } }


/* v5.13 link routing editor */
.route-legend { display:grid; grid-template-columns:1fr 1fr; gap:5px; font-size:12px; }
.line-sample { display:inline-block; width:34px; height:0; border-top:3px solid #555; vertical-align:middle; margin-right:6px; }
.line-none { border-top-color:#555; }
.line-lag { border-top-color:#f59e0b; border-top-style:dashed; }
.line-musk { border-top-color:#7c3aed; }
.line-div { border-top-color:#d9473f; border-top-style:dashed; }
.routing-check { margin-top:8px; padding:7px; border:1px solid #d8dee8; border-radius:4px; background:#f8fafc; color:#334155; font-size:12px; line-height:1.35; }
.routing-check.ok { border-color:#94d39a; background:#eefcef; color:#176b1f; }
.routing-check.warn { border-color:#f0d083; background:#fff8df; color:#805700; }
.routing-check.err { border-color:#e0a0a0; background:#fff2f2; color:#9b1111; }
#editLinkTitle[readonly] { background:#f2f2f2; color:#555; }


/* v5.14 link geometry/digitize editor */
.geometry-info { font-size:13px; line-height:1.45; border:1px solid #e5e7eb; padding:8px; background:#fcfcfc; border-radius:4px; }
.geometry-info.active { border-color:#0b68a8; background:#eef8ff; }
.geometry-info.saved { border-color:#94d39a; background:#eefcef; color:#176b1f; }
.geometry-info.warn { border-color:#f0d083; background:#fff8df; color:#805700; }
.geom-vertex { width:18px; height:18px; border-radius:50%; background:#fff; border:3px solid #f97316; box-shadow:0 1px 4px rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:bold; color:#9a3412; }
.line-geometry { border-top-color:#16a34a; border-top-style:solid; }

/* v5.14.1: draggable geometry vertices and clearer move state */
.geom-vertex { cursor: move; }
.leaflet-marker-draggable .geom-vertex { outline:3px solid rgba(249,115,22,0.28); }

/* v5.15 Node input forms / guide curve / hydropower monthly targets */
.node-input-section { border-color: #c7d2fe; background: #fbfdff; }
.param-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.param-tab { width: auto; padding: 7px 9px; border-radius: 8px; border: 1px solid #cbd5e1; background: #f8fafc; color: #334155; cursor: pointer; font-size: 12px; }
.param-tab.active { background: #1d4ed8; color: #fff; border-color: #1d4ed8; }
.param-panel { display: none; }
.param-panel.active { display: block; }
.table-scroll { max-width: 100%; overflow-x: auto; margin-top: 8px; }
table.edit-table, table.mini { border-collapse: collapse; width: 100%; font-size: 11px; }
table.edit-table th, table.edit-table td, table.mini th, table.mini td { border: 1px solid #dbe3ef; padding: 4px 5px; vertical-align: middle; }
table.edit-table th, table.mini th { background: #eef2ff; color: #1f2937; font-weight: 700; }
table.edit-table input { width: 92px; padding: 4px; font-size: 11px; border: 1px solid #cbd5e1; border-radius: 4px; box-sizing: border-box; }
table.edit-table .gc-note, table.edit-table .hm-note { width: 130px; }
.mini-table { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px; margin-top: 8px; max-height: 260px; overflow: auto; }
.guide-chart { min-height: 160px; border: 1px solid #dbeafe; border-radius: 8px; background: #ffffff; padding: 6px; margin: 8px 0; }
.guide-chart svg { width: 100%; height: auto; display: block; }
.geometry-info.saved { background: #ecfdf5; border-color: #86efac; color: #14532d; }

/* v5.15.1 NodeType-aware input forms */
.param-tab.hidden, .param-panel.hidden { display: none !important; }
.node-type-help { margin: 6px 0 8px; padding: 7px; border: 1px solid #bfdbfe; background: #eff6ff; color: #1e3a8a; border-radius: 6px; font-size: 12px; line-height: 1.35; }
.node-type-chip { display: inline-block; margin-top: 3px; color: #334155; }
.grid-2 .wide { grid-column: 1 / -1; }
.param-panel .validation-item { font-size: 12px; }


/* v5.15.2 Wide Detail Editor: panel phải gọn, form chi tiết mở rộng */
.wb-layout { grid-template-columns: 1fr 390px; }
.wb-tool-panel { background:#f8fafc; }
.tool-accordion { border:1px solid #e2e8f0; border-radius:10px; background:#fff; margin:8px 0; overflow:hidden; }
.tool-accordion > summary { cursor:pointer; padding:9px 10px; font-weight:700; color:#0f172a; background:#eef2ff; border-bottom:1px solid #e2e8f0; user-select:none; }
.tool-accordion:not([open]) > summary { border-bottom:0; }
.tool-accordion .wb-section { margin:8px 10px; }
.tool-accordion .tool-grid { margin:10px; }
.wide-open-btn { display:block; width:100%; margin-top:8px; background:#1d4ed8; color:#fff; border-color:#1d4ed8; font-weight:700; }
.wide-open-btn:hover { filter:brightness(0.95); }
.wb-modal { position:fixed; inset:0; background:rgba(15,23,42,0.52); z-index:9999; display:none; align-items:center; justify-content:center; padding:22px; box-sizing:border-box; }
.wb-modal.open { display:flex; }
.wb-modal-card { background:#fff; border-radius:14px; box-shadow:0 22px 60px rgba(15,23,42,0.35); max-height:92vh; overflow:auto; border:1px solid #dbe3ef; }
.wb-modal-large { width:min(1280px, 94vw); }
.wb-modal-medium { width:min(920px, 90vw); }
.wb-modal-header { position:sticky; top:0; z-index:2; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:14px 18px; border-bottom:1px solid #e2e8f0; background:#ffffff; border-radius:14px 14px 0 0; }
.wb-modal-header h2 { margin:0 0 4px; font-size:20px; color:#0f172a; }
.modal-subtitle { font-size:13px; color:#64748b; line-height:1.35; }
.modal-close { background:#f1f5f9; border-color:#cbd5e1; font-weight:700; }
.wide-editor-body { padding:14px 18px 18px; border-bottom:0; }
.wide-editor-body h3 { margin-top:0; }
.wb-modal .grid-2 { grid-template-columns: repeat(2, minmax(240px, 1fr)); gap:10px 14px; }
.wb-modal .wb-form input, .wb-modal .wb-form select { padding:8px; }
.wb-modal .param-tabs { gap:8px; }
.wb-modal .param-tab { font-size:13px; padding:9px 12px; }
.wb-modal table.edit-table { font-size:12px; min-width:850px; }
.wb-modal table.edit-table input { width:120px; font-size:12px; padding:6px; }
.wb-modal table.edit-table .gc-note, .wb-modal table.edit-table .hm-note { width:180px; }
.wb-modal .guide-chart { min-height:220px; }
@media (max-width: 900px) {
  .wb-layout { grid-template-columns:1fr; }
  .wb-modal { padding:8px; align-items:stretch; }
  .wb-modal-card { width:100%; max-height:96vh; }
  .wb-modal .grid-2 { grid-template-columns:1fr; }
}

/* v5.15.3 popup edit + length factor */
.wb-leaflet-popup { min-width: 220px; font-size: 13px; line-height: 1.35; }
.wb-popup-action { margin-top: 8px; width: 100%; padding: 6px 8px; border: 1px solid #2563eb; background: #eff6ff; color: #1d4ed8; border-radius: 4px; cursor: pointer; font-weight: 600; }
.wb-popup-action:hover { background: #dbeafe; }
.geometry-factor-box { margin-top: 8px; border: 1px solid #d7e3f8; background: #f8fbff; padding: 8px; border-radius: 6px; }
.geometry-factor-box label { font-size: 12px; font-weight: 600; color: #334155; }
.geometry-factor-box input[readonly] { background: #f1f5f9; color: #0f172a; }

/* v5.15.4 Z-F-V editor */
.zfv-chart { min-height: 260px; border: 1px solid #dbeafe; border-radius: 8px; background:#fff; padding: 6px; margin: 8px 0; }
.zfv-chart svg { width:100%; height:auto; display:block; }
.zfv-table-wrap table.edit-table { min-width: 760px; }
.zfv-table-wrap table.edit-table input { width: 140px; }
.zfv-table-wrap table.edit-table .zfv-select { width:auto; }
.zfv-table-wrap table.edit-table .zfv-note { width: 220px; }
.zfv-table-wrap .row-no { text-align:center; font-weight:700; color:#334155; }
.wb-modal .zfv-chart { min-height: 300px; }

/* v5.15.5 - Guide Curve Advanced Editor */
.guide-tools { background:#f8fafc; border:1px solid #dbeafe; border-radius:8px; margin:8px 0 10px 0; }
.guide-tool-grid { gap:8px; align-items:end; }
.inline-inputs { display:flex; gap:6px; }
.inline-inputs input { min-width:0; }
.zone-summary { font-size:12px; line-height:1.45; background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; padding:8px 10px; margin:8px 0; color:#334155; }
.zone-pill-wrap { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.zone-pill { display:inline-block; border:1px solid #cbd5e1; background:#fff; border-radius:999px; padding:3px 8px; }
.guide-chart { min-height:300px; border:1px solid #dbeafe; border-radius:8px; padding:6px; background:#fff; }
.guide-chart svg { width:100%; height:auto; display:block; }
.edit-table .month-cell { font-weight:700; text-align:center; background:#f8fafc; }
@media (max-width: 900px) {
  .guide-tool-grid { grid-template-columns:1fr 1fr; }
}

/* v5.15.6 CSV import tools for wide input forms */
.csv-import-box {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  background:#f8fafc;
  border:1px dashed #93c5fd;
  border-radius:8px;
  padding:8px 10px;
  margin:8px 0 10px 0;
  font-size:13px;
}
.csv-import-box b { color:#0f172a; margin-right:4px; }
.csv-import-box input[type="file"] { max-width:280px; font-size:12px; }
.csv-import-box button { padding:5px 9px; font-size:12px; }
.csv-status { color:#475569; line-height:1.35; }
.csv-status.ok { color:#166534; font-weight:600; }
.csv-status.warn { color:#92400e; font-weight:600; }
.csv-status.err { color:#991b1b; font-weight:600; }


/* v5.15.7 - Hydropower monthly energy editor */
.hydro-tools { background:#f8fafc; border:1px solid #dbeafe; border-radius:8px; margin:8px 0 10px 0; }
.hydro-tool-grid { gap:8px; align-items:end; }
.hydro-chart { min-height:260px; border:1px solid #dbeafe; border-radius:8px; padding:6px; background:#fff; margin:8px 0; }
.hydro-chart svg { width:100%; height:auto; display:block; }
#hydroMonthlyTable .hm-qreq, #hydroMonthlyTable .hm-pavg { text-align:right; font-weight:600; color:#334155; background:#f8fafc; white-space:nowrap; }
.wb-modal .hydro-chart { min-height:300px; }

/* v5.15.8 Demand / Lowflow monthly editors */
.demand-tools, .lowflow-tools { background:#f8fafc; border:1px solid #dbeafe; border-radius:8px; margin:8px 0 10px 0; }
.demand-tool-grid, .lowflow-tool-grid { gap:8px; align-items:end; }
.demand-chart, .lowflow-chart, .diversion-chart { min-height:260px; border:1px solid #dbeafe; border-radius:8px; padding:6px; background:#fff; margin:8px 0; }
.demand-chart svg, .lowflow-chart svg, .diversion-chart svg { width:100%; height:auto; display:block; }
.wb-modal .demand-chart, .wb-modal .lowflow-chart, .wb-modal .diversion-chart { min-height:300px; }
#demandMonthlyTable td:first-child, #lowflowMonthlyTable td:first-child { text-align:center; font-weight:700; color:#334155; background:#f8fafc; }

/* v5.15.10 START/Input rainfall-runoff editor */
.monthly-toolbox { border: 1px solid #dbeafe; background: #f8fafc; border-radius: 8px; padding: 10px; margin: 10px 0; }
.monthly-toolbox button { margin: 4px 6px 4px 0; }
.summary-box { font-size: 12px; line-height: 1.45; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 8px 10px; margin: 8px 0; color: #334155; }
.chart-box { min-height: 260px; border: 1px solid #dbeafe; border-radius: 8px; padding: 6px; background: #fff; margin: 8px 0; }
.chart-box svg { width: 100%; height: auto; display: block; }
.wb-modal .chart-box { min-height: 300px; }
.editable-table input { min-width: 86px; }
/* v5.15.11 ParameterFile validation */
.parameter-check-box { max-height: 420px; }
.parameter-check-box .validation-item { font-size: 12px; }

/* v5.16.0 */
a.button-like{display:inline-block;border:1px solid #aab7cf;background:#fff;color:#123;text-decoration:none;border-radius:4px;padding:7px 10px;margin:3px 4px 3px 0;font-size:14px;line-height:1.2}
a.button-like:hover{background:#eef4ff;border-color:#607db7}