/* ============================================================
   peta.css — tampilan peta seragam untuk semua portal
   Acuan: /admin/map (Peta Jaringan).
   Struktur, marker, dan popup SAMA di mana pun; warnanya
   mengikuti token tema portal bila ada (--panel/--ink/--slate/
   --line/--pri), selain itu memakai nilai acuan admin.
   ============================================================ */
:root{
  --pp-bg:var(--panel,#fff);
  --pp-ink:var(--ink,#0f172a);
  --pp-sub:var(--slate,#64748b);
  --pp-line:var(--line,#e2e8f0);
  --pp-soft:var(--panel2,#f8fafc);
  --pp-acc:var(--pri,#2563eb);
}

/* ---------- kotak peta ---------- */
.peta{width:100%;border-radius:14px;border:1px solid var(--pp-line);background:#e5e7eb;z-index:0}
#picker-map,#edit-picker-map,.peta-picker{height:250px;border-radius:8px;margin-bottom:15px;border:1px solid var(--pp-line);background:#e5e7eb;z-index:1}
#cable-drawing-map{height:450px;border-radius:8px;border:1px solid var(--pp-line);background:#e5e7eb;z-index:1}

/* ---------- marker: pin bulat ---------- */
.node-pin{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#16a34a;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.node-pin.off{background:#dc2626}
.node-pin.on{background:#16a34a}
.node-pin i{font-size:16px !important;color:#fff !important;line-height:1;text-shadow:none !important;filter:none !important}
.node-pin b{color:#fff;font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-weight:800;font-size:12px;line-height:1;letter-spacing:0}
.node-pin.pin-samar{opacity:.55}
.custom-div-icon{display:flex !important;align-items:center;justify-content:center;background:transparent;border:none}

/* ---------- popup ---------- */
.leaflet-popup-content-wrapper{background:var(--pp-bg);color:var(--pp-ink)}
.leaflet-popup-tip{background:var(--pp-bg)}
.popup-content{font-size:13px;color:var(--pp-ink)}
.popup-content h6{margin:0 0 5px;font-size:14px;border-bottom:1px solid var(--pp-line);padding-bottom:5px}
.odp-pop{min-width:232px}
.pop-badge{display:inline-block;background:#dcfce7;color:#16a34a;font-size:10px;font-weight:800;padding:2px 8px;border-radius:20px;text-transform:uppercase;letter-spacing:.3px}
.pop-name{font-size:15px;font-weight:800;color:var(--pp-ink);margin:6px 0 2px}
.pop-coord{display:inline-flex;align-items:center;gap:4px;color:var(--pp-acc);font-size:12px;font-weight:700;text-decoration:none}
.pop-sub{font-size:12px;color:var(--pp-sub);margin-top:4px}
.pop-sub b{color:var(--pp-ink);font-weight:700}
.pop-slot{background:var(--pp-soft);border:1px solid var(--pp-line);border-radius:10px;padding:9px 11px;margin:9px 0}
.pop-slot-head{display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:var(--pp-ink)}
.pop-slot-num b{color:#16a34a}
.pop-bar{height:7px;background:var(--pp-line);border-radius:5px;overflow:hidden;margin:6px 0}
.pop-bar-fill{height:100%;background:linear-gradient(90deg,#f59e0b,#eab308)}
.pop-avail{font-size:11px;color:var(--pp-sub);font-weight:700}
.pop-avail b{color:#16a34a}
.pop-conn{margin:8px 0}
.pop-conn-t{font-size:11px;font-weight:800;color:var(--pp-ink);margin-bottom:4px}
.pop-conn-i{font-size:12px;color:var(--pp-ink);display:flex;align-items:center;gap:6px}
.pop-onts{max-height:96px;overflow:auto;display:flex;flex-direction:column;gap:3px}
.pop-ont{font-size:12px;color:var(--pp-ink);display:flex;align-items:center;gap:6px}
.pdot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0}
.ont-rows{margin:8px 0}
.ont-row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:3px 0;border-bottom:1px dashed var(--pp-line)}
.ont-row span{color:var(--pp-sub)}
.ont-row b{color:var(--pp-ink);font-weight:700}
.ont-sec{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--pp-acc);margin:10px 0 4px;border-top:1px solid var(--pp-line);padding-top:8px}

/* ---------- tombol di dalam popup ---------- */
.popup-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.pop-btns{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.pop-btns-row{display:flex;gap:6px}
.pbtn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;border:none;border-radius:6px;padding:8px 10px;font-size:12.5px;font-weight:700;cursor:pointer;color:#fff !important;line-height:1;text-decoration:none !important;font-family:inherit}
.pbtn:hover,.pbtn:visited,.pbtn:focus{color:#fff !important;text-decoration:none}
.pbtn:hover{opacity:.92}
.pbtn-edit{background:var(--pp-acc)}
.pbtn-move{background:#16a34a}
.pbtn-del{background:#dc2626}
.pbtn-nav{background:#2563eb}
.pbtn-wa{background:#25d366}

/* ---------- kontrol peta ---------- */
.leaflet-control-layers{border-radius:12px !important;border:1px solid var(--pp-line) !important;background:var(--pp-bg) !important;box-shadow:0 6px 18px rgba(15,23,42,.14) !important}
.leaflet-control-layers-expanded{padding:9px 12px 9px 10px !important;color:var(--pp-ink);font-family:inherit;font-size:12.5px;font-weight:700}
.leaflet-control-layers-expanded label{margin-bottom:4px}
.leaflet-touch .leaflet-bar a{width:32px;height:32px;line-height:32px}
.leaflet-bar{border-radius:10px !important;overflow:hidden;box-shadow:0 6px 18px rgba(15,23,42,.14) !important}

/* ---------- garis kabel beranimasi ---------- */
@keyframes peta-flow{to{stroke-dashoffset:-20}}
.flowing-line{animation:peta-flow 3s linear infinite;stroke-linecap:round}
.leaflet-container.leaflet-drag-target .flowing-line{animation:none}

/* ---------- legenda ---------- */
.peta-legenda{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}
.peta-legenda .lg{display:inline-flex;align-items:center;gap:7px;background:var(--pp-bg);border:1px solid var(--pp-line);border-radius:999px;padding:6px 12px;font-size:11.5px;font-weight:700;color:var(--pp-ink)}
.peta-legenda .lg i{width:10px;height:10px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 4px rgba(0,0,0,.35);flex:0 0 auto}