/* Neraca Air Langsung — Q80 bulanan + pemeliharaan + kebutuhan pemakai */
.neraca-air-panel {
    position: fixed;
    z-index: 1910;
    right: 18px;
    bottom: 82px;
    width: min(800px, calc(100vw - 36px));
    max-height: min(86dvh, 920px);
    display: none;
    overflow: hidden;
    border: 1px solid rgba(14,116,144,.24);
    border-radius: 22px;
    background: rgba(255,255,255,.99);
    box-shadow: 0 24px 70px rgba(15,23,42,.28);
    color: #0f172a;
    font-family: Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
}
body.neraca-air-open #waterBalanceEnginePanel { display:flex; flex-direction:column; }
body.neraca-dem-open #demAnalysisPanel { display:flex; flex-direction:column; }
.na-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; color:#fff; background:linear-gradient(135deg,#075985,#0e7490 55%,#0f766e); }
.na-title { min-width:0; display:flex; align-items:center; gap:11px; }
.na-title-icon { width:40px; height:40px; flex:0 0 40px; display:grid; place-items:center; border-radius:12px; background:rgba(255,255,255,.18); font-size:22px; }
.na-title h2 { margin:0; font-size:17px; line-height:1.1; }
.na-title p { margin:4px 0 0; font-size:11.5px; opacity:.9; }
.na-close { width:38px; height:38px; border:0; border-radius:12px; color:#fff; background:rgba(255,255,255,.15); font-size:24px; cursor:pointer; }
.na-body { overflow:auto; padding:12px; overscroll-behavior:contain; }
.na-status { margin-bottom:10px; padding:10px 12px; border-radius:13px; color:#075985; background:#e0f2fe; font-size:12px; font-weight:750; }
.na-status.success { color:#166534; background:#dcfce7; }
.na-status.warning { color:#92400e; background:#fef3c7; }
.na-status.error { color:#991b1b; background:#fee2e2; }
.na-status.loading { color:#5b21b6; background:#ede9fe; }
.na-section { margin:0 0 11px; overflow:hidden; border:1px solid #dbe7ec; border-radius:17px; background:#fff; }
.na-section-head { display:flex; align-items:center; gap:9px; padding:12px 13px; background:linear-gradient(180deg,#fff,#f8fafc); }
.na-section-head > span { width:27px; height:27px; flex:0 0 27px; display:grid; place-items:center; border-radius:9px; color:#fff; background:#0891b2; font-size:11px; font-weight:900; }
.na-section-head b { display:block; font-size:13px; }
.na-section-head small { display:block; margin-top:2px; color:#64748b; font-size:10.5px; }
.na-section-body { padding:12px 13px 14px; border-top:1px solid #e5edf1; }
.na-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.na-span-2 { grid-column:span 2; }
.na-field { min-width:0; display:flex; flex-direction:column; gap:5px; }
.na-field > span { color:#475569; font-size:10.5px; font-weight:850; }
.na-field input,.na-field select { width:100%; min-height:42px; box-sizing:border-box; border:1px solid #cbd5e1; border-radius:11px; padding:8px 10px; color:#0f172a; background:#fff; font:700 12px/1.25 Inter,system-ui,sans-serif; }
.na-btn { min-height:42px; border:1px solid #cbd5e1; border-radius:11px; padding:8px 12px; color:#334155; background:#fff; font:850 11.5px/1 Inter,system-ui,sans-serif; cursor:pointer; }
.na-btn.primary { color:#fff; border-color:#0e7490; background:linear-gradient(135deg,#0369a1,#0e7490); }
.na-btn.secondary { color:#075985; border-color:#7dd3fc; background:#e0f2fe; }
.na-btn:disabled { opacity:.45; cursor:not-allowed; }
.na-meta { margin-top:9px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.na-card { min-width:0; padding:9px; border:1px solid #e2e8f0; border-radius:12px; background:#f8fafc; }
.na-card b { display:block; color:#64748b; font-size:10px; }
.na-card strong { display:block; margin-top:3px; color:#0f172a; font-size:12.5px; overflow-wrap:anywhere; }
.na-demand-grid { margin-top:10px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.na-demand-item { display:grid; grid-template-columns:42px 1fr; align-items:center; gap:5px; }
.na-demand-item span { color:#475569; font-size:10px; font-weight:850; }
.na-demand-item input { width:100%; min-height:38px; box-sizing:border-box; border:1px solid #cbd5e1; border-radius:9px; padding:6px 7px; font-size:11px; font-weight:750; }
.na-summary { margin-bottom:10px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; }
.na-summary > div { min-width:0; padding:9px; border:1px solid #dbe4ea; border-radius:12px; background:#f8fafc; }
.na-summary span { display:block; color:#64748b; font-size:9.5px; font-weight:800; }
.na-summary b { display:block; margin-top:4px; font-size:15px; }
.na-summary small { display:block; margin-top:2px; color:#64748b; font-size:9px; }
.na-chart-wrap { height:270px; margin-bottom:10px; padding:6px; border:1px solid #dbe4ea; border-radius:13px; background:#fff; }
.na-chart-wrap canvas { width:100%!important; height:100%!important; }
.na-table-wrap { max-height:330px; overflow:auto; border:1px solid #dbe4ea; border-radius:12px; }
.na-table { width:100%; min-width:720px; border-collapse:collapse; font-size:10.5px; }
.na-table th,.na-table td { padding:8px; border-bottom:1px solid #e5e7eb; text-align:right; white-space:nowrap; }
.na-table th:first-child,.na-table td:first-child { text-align:left; }
.na-table th { position:sticky; top:0; z-index:1; color:#fff; background:#0e7490; }
.na-table td.positive { color:#166534; font-weight:900; }
.na-table td.negative { color:#b91c1c; font-weight:900; }
.na-status-pill { display:inline-block; min-width:72px; padding:4px 7px; border-radius:999px; text-align:center; font-size:9px; font-weight:900; }
.na-status-pill.surplus { color:#166534; background:#dcfce7; }
.na-status-pill.defisit { color:#991b1b; background:#fee2e2; }
.na-status-pill.seimbang { color:#92400e; background:#fef3c7; }
.na-status-pill.data-tidak-tersedia { color:#475569; background:#e2e8f0; }
.na-actions { margin-top:10px; display:flex; flex-wrap:wrap; gap:7px; }
.na-note { margin:8px 0 0; color:#64748b; font-size:10.5px; line-height:1.45; }
.negative-text { color:#b91c1c; }
.analysis-icon-button.analysis-icon-neraca span:first-child { font-size:20px; line-height:1; }
@media (max-width:1024px) {
    .neraca-air-panel { left:calc(var(--ui-edge) + var(--ui-safe-left))!important; right:calc(var(--ui-edge) + var(--ui-safe-right))!important; bottom:var(--ui-panel-bottom)!important; width:auto!important; max-height:calc(var(--app-height) - var(--ui-panel-bottom) - var(--ui-safe-top) - 18px)!important; border-radius:19px!important; }
    .na-summary { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:720px) {
    .na-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .na-span-2 { grid-column:span 2; }
    .na-meta { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .na-demand-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .na-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .na-title p { display:none; }
    .na-chart-wrap { height:230px; }
}
@media (max-width:420px) {
    .na-grid { grid-template-columns:1fr; }
    .na-span-2 { grid-column:span 1; }
    .na-demand-grid { grid-template-columns:1fr 1fr; }
    .na-meta { grid-template-columns:1fr 1fr; }
    .na-summary { grid-template-columns:1fr 1fr; }
}


/* Analisis DEM lanjutan tetap dipertahankan dalam panel terpisah */
#demAnalysisPanel { width:min(900px,calc(100vw - 36px)); z-index:1920; }
.dem-launch { color:#fff; border-color:#7c3aed; background:linear-gradient(135deg,#6d28d9,#2563eb); }
.na-step { margin:0 0 11px; border:1px solid #dbe7ec; border-radius:17px; background:#fff; overflow:hidden; }
.na-step > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:9px; padding:12px 13px; font-size:13px; font-weight:900; background:linear-gradient(180deg,#fff,#f8fafc); }
.na-step > summary::-webkit-details-marker { display:none; }
.na-step > summary span { width:26px; height:26px; display:grid; place-items:center; border-radius:9px; color:#fff; background:#0891b2; font-size:11px; }
.na-step-content { padding:12px 13px 14px; border-top:1px solid #e5edf1; }
.na-span-4 { grid-column:span 4; }
.na-field textarea { width:100%; min-height:74px; box-sizing:border-box; border:1px solid #cbd5e1; border-radius:11px; padding:8px 10px; resize:vertical; color:#0f172a; background:#fff; font:700 12px/1.25 Inter,system-ui,sans-serif; }
.na-field input[type=file] { padding:7px; }
.na-preview { margin-top:10px; display:grid; grid-template-columns:minmax(180px,.8fr) minmax(0,1.2fr); gap:10px; }
.na-preview img { width:100%; max-height:260px; object-fit:contain; border:1px solid #cbd5e1; border-radius:13px; background:#e8efe7; }
.na-terrain-legend { display:flex; flex-wrap:wrap; gap:5px 9px; margin-top:6px; padding:7px 8px; border:1px solid #dbe4da; border-radius:10px; background:#f8faf7; color:#475569; font-size:9.5px; font-weight:800; }
.na-terrain-legend span { display:flex; align-items:center; gap:4px; }
.na-terrain-legend i { width:17px; height:8px; display:inline-block; border-radius:999px; border:1px solid rgba(15,23,42,.15); }
.na-terrain-legend .low { background:#3f8b4a; }
.na-terrain-legend .mid { background:#d3bb70; }
.na-terrain-legend .high { background:#cabfae; }
.na-terrain-legend .river { background:#00aeef; }
.na-inline-check { min-height:42px; display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid #cbd5e1; border-radius:11px; background:#f8fafc; font-size:11px; font-weight:750; }
.na-inline-check input { width:18px; height:18px; }
.na-chart { width:100%; height:260px; margin-top:10px; border:1px solid #dbe4ea; border-radius:13px; background:#fff; }
.na-result-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:8px 0; }
.na-result-head h3 { margin:0; font-size:13px; }
.na-badge { padding:5px 8px; border-radius:999px; background:#fef3c7; color:#92400e; font-size:9.5px; font-weight:900; text-transform:uppercase; }
.na-badge.calibrated { background:#dcfce7; color:#166534; }
.na-hidden { display:none!important; }
body.neraca-air-open.neraca-dem-open #waterBalanceEnginePanel { display:none; }
@media (max-width:720px) {
  .na-span-4 { grid-column:span 2; }
  .na-preview { grid-template-columns:1fr; }
}
@media (max-width:420px) {
  .na-span-4 { grid-column:span 1; }
}

/* Pembaruan alur otomatis debit dan neraca air */
.na-terrain-legend .river {
    background:linear-gradient(180deg,#b9f4ff 0 28%,#00beff 28% 72%,#03235c 72% 100%);
    border-color:#03235c;
    box-shadow:0 0 0 1px rgba(255,255,255,.75) inset;
}
.na-badge.automatic { color:#075985; background:#e0f2fe; }
.na-table td.highlight { color:#0369a1; font-weight:900; background:#f0f9ff; }
#nadAutoMeta:empty { display:none; }

/* Overlay hasil analisis DEM pada peta utama */
.na-map-overlay-actions {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:12px 0;
  padding:10px; border:1px solid #bae6fd; border-radius:12px; background:#f0f9ff;
}
.na-map-overlay-actions small { flex:1 1 240px; color:#475569; line-height:1.4; }
.nad-map-overlay-legend {
  min-width:154px; padding:9px 11px; border-radius:11px; border:1px solid rgba(15,23,42,.18);
  background:rgba(255,255,255,.94); box-shadow:0 5px 18px rgba(15,23,42,.2); color:#0f172a;
  font:12px/1.25 system-ui,-apple-system,"Segoe UI",sans-serif;
}
.nad-map-overlay-legend b { display:block; margin-bottom:6px; font-size:12px; }
.nad-map-overlay-legend span { display:flex; align-items:center; gap:7px; margin:4px 0; }
.nad-map-overlay-legend i { width:24px; height:8px; display:inline-block; border-radius:4px; }
.nad-map-overlay-legend .terrain { background:linear-gradient(90deg,#185c36,#8eb15b,#d3bb70,#a4744b,#f8f8f2); }
.nad-map-overlay-legend .subbasin { height:0; border-top:2px solid #f8fafc; box-shadow:0 0 0 1px #0284c7; }
.nad-map-overlay-legend .river { height:4px; background:#00ddff; border:2px solid #062b63; }
.nad-map-overlay-legend .outlet { width:10px; height:10px; border-radius:50%; background:#facc15; border:2px solid #7f1d1d; }
.nad-subbasin-tooltip,.nad-reach-tooltip { font-weight:700; color:#0f172a; }
.leaflet-image-layer.nad-dem-image-overlay { image-rendering:auto; }
@media (max-width:700px) {
  .na-map-overlay-actions .na-btn { min-height:44px; flex:1 1 140px; }
  .nad-map-overlay-legend { min-width:134px; transform:scale(.92); transform-origin:bottom right; }
}