:root{ --app-font: "Assistant", "Assistant", system-ui, Arial, sans-serif; }

/* Terapkan ke seluruh UI dan elemen Leaflet */
html, body, #map,
.leaflet-container,
.leaflet-container * ,
.panel, .modal, .form-panel,
.leaflet-tooltip,
.nw-status-items, .nw-item, .nw-children {
  font-family: var(--app-font) !important;
}

/* Pastikan angka di dalam marker (FTTH) ikut pakai Assistant */
.nw-laser-divicon, .nw-laser-divicon * {
  font-family: var(--app-font) !important;
}

/* Label nama di bawah marker */
.leaflet-tooltip.nw-label, .leaflet-tooltip.nw-hover-tip {
  font-family: var(--app-font) !important;
}

/* (opsional) perhalus rendering font kecil */
.nw-laser-divicon, .nw-laser-divicon * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ===== Layout dasar ===== */
html, body, #map { height: 100%; margin: 0; }
body{ font-family: var(--app-font); }
#map{ width: 100%; height: 100%; }

/* ===== Panel kontrol kanan (tanpa animasi) ===== */
.panel{
  position: absolute; top: 0; right: 0; z-index: 1000;
  background: rgba(255,255,255,.96);
  padding: 5px; width: 240px;
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
  font: 14px/1.45 var(--app-font);
  transform: none !important;
  transition: none !important;
}
.panel.collapsed{ display: none !important; }

.row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
input[type="range"]{ width:100%; }

/* Tombol toggle selalu di tepi kanan layar */
.toggle-panel-btn{
  position: fixed; right: 0; top: 0;
  width: 32px; height: 34px; z-index: 2001;
  border: 0; background: #fff; color:#000; cursor: pointer;
  font-size: 22px; padding-bottom: 4px;
  transition: none !important;
}

/* ===== Leaflet UX ===== */
.leaflet-touch .leaflet-control-layers-toggle { width:30px; height:30px; }

/* Saat overlay Labels dimatikan via LayerToggle */
.labels-hidden .leaflet-tooltip.nw-label{ display:none !important; }
.labels-hidden .leaflet-pane.leaflet-overlay-pane { opacity: 1; }

/* ===== Blok kontrol kustom (disuntik ke Layers) ===== */
.leaflet-control-layers .layers-custom-block{
  margin-top:8px; padding-top:8px; border-top:1px solid #eee; font-size:12px;
}
.leaflet-control-layers .layers-custom-block .title{ margin-bottom:4px; font-weight:600; }
.leaflet-control-layers .layers-custom-block .row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

/* ===== Label permanen kecil di bawah marker ===== */
.leaflet-tooltip.nw-label{
  background: rgba(255,255,255,.95);
  color: #111;
  border: 1px solid rgba(0,0,0,.2);
  padding: 1px 4px;
  font-size: 11px;
  line-height: 1.1;
  border-radius: 3px;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
  margin-top: -2px; /* rapat ke marker */
}
.nw-label-name{ font-weight:500; white-space:nowrap; }

/* ===== Hover tooltip di marker ===== */
.leaflet-tooltip.nw-hover-tip{
  background:#111; color:#fff; border:none; border-radius:6px;
  padding:6px 8px; font-size:12px;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  width:150px;
  opacity:0.8;
  border:1px solid white;
}
.nw-hover-tip .tt-title{ font-weight:700; margin-bottom:2px; }
.nw-hover-tip .tt-body{ opacity:.9; white-space:pre-line;line-height:0.7 }

/* ===== Modal Detail ===== */
.modal{ position:fixed; inset:0; z-index:2000; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.45); padding:20px; }
.modal.open{ display:flex; }
.modal-card{ width:min(92vw,560px); background:#fff; border-radius:14px; box-shadow:0 18px 60px rgba(0,0,0,.3); overflow:hidden; color:#111827; font:14px/1.4 var(--app-font); }
.modal-header{ background:#2563eb; color:#fff; font-weight:700; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; }
.modal-body{ padding:14px 16px; }
.modal-actions{ padding:12px 16px; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; border-top:1px solid #e5e7eb; background:#fafafa; }
.info-box{ background:#fff8d6; border:1px solid #e8df9a; border-radius:8px; padding:8px 10px; margin-bottom:10px; font:12px/1.35 var(--app-font); }
.thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:10px; }
.thumb{ aspect-ratio:4/3; background:#f3f4f6; border:1px solid #e5e7eb; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:12px; color:#6b7280; overflow:hidden; }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.btn{ display:inline-flex; align-items:center; justify-content:center; padding:3px 5px 5px; border-radius:5px; border:0; cursor:pointer; font-family:var(--app-font); }
.btn-blue{ background:#1d4ed8; color:#fff; } .btn-amber{ background:#f59e0b; color:#111827; }
.btn-red{ background:#ef4444; color:#fff; } .btn-green{ background:#10b981; color:#fff; }
.btn-slate{ background:#334155; color:#fff; } .btn-gray{ background:#9ca3af; color:#111827; }

/* ===== Overlay Add/Edit (draggable) ===== */
.form-overlay{ position:fixed; inset:0; z-index:2100; display:none; background:rgba(0,0,0,.45); }
.form-overlay.open{ display:block; }
.form-panel{
  position:absolute; width:100%; max-width:340px; max-height:90vh;
  background:#fff; border:1px solid #e5e7eb; border-radius:12px; box-shadow:0 18px 60px rgba(0,0,0,.3);
  overflow:auto;
}
.form-header{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; background:#2563eb; color:#fff; font-weight:700; cursor:move; }
.form-body{ padding:8px 10px; }
.form-actions{ display:flex; gap:8px; justify-content:flex-end; padding:10px 12px; background:#fafafa; border-top:1px solid #e5e7eb; }

/* Form grid */
.form-grid{ display:grid; grid-template-columns:70px 1fr; column-gap:5px; row-gap:5px; align-items:center; font-family:var(--app-font); }
.form-grid .l{ text-align:right; font-size:12px; color:#374151; padding-right:4px; }
.form-grid .i input, .form-grid .i select, .form-grid .i textarea{
  width:100%; padding:4px 5px; border:1px solid #d1d5db; border-radius:4px; font:12px/1.3 var(--app-font); box-sizing:border-box;
}
.inline-2{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }

/* ===== Rekap Status ===== */
.nw-status-items{ max-height:55vh; overflow:auto; padding-right:4px; }
.nw-item{ display:flex; align-items:center; justify-content:space-between; font:12px/1.35 var(--app-font); cursor:pointer; border-top:1px solid #eee; }
.nw-item:hover{ background:#f3f4f6; }
.nw-section{ font:12px/1.35 var(--app-font); letter-spacing:.08em; color:#6b7280; padding:5px 0; font-weight:800; border-bottom:1px solid #eee; display:none; }

/* Dot status/laser yang bisa berisi angka */
.nw-name{ display:flex; align-items:center; gap:6px; }
.nw-dot{
  display:inline-flex; align-items:center; justify-content:center;
  width:12px; height:12px;
  border-radius:999px; background:#bbb; color:#fff;
  font-size:9px; font-weight:700;
  border:1px solid rgba(0,0,0,.8);
  padding:1px;
}
.nw-item .nw-name span:last-child{ overflow:hidden; text-overflow:ellipsis; }
.nw-ts{ opacity:.65; font-size:12px; white-space:nowrap; margin-left:8px; }

/* Anak offline */
.nw-children{ display:none; padding:0 0 0 20px; }
.nw-item.is-open + .nw-children{ display:block; }
.nw-child{ display:flex; align-items:center; justify-content:space-between; font:12px/1.45 var(--app-font); cursor:pointer; }
.nw-child .nw-dot{ width:7px; height:7px; min-width:7px; min-height:7px; margin-right:6px; }
.nw-children .nw-ico{ font-size:14px; opacity:.7; margin-right:3px; line-height:1; }

/* Badges counter */
.badge{
  display:inline-flex; align-items:center; font-size:12px;
  padding:3px 5px; border-radius:5px; cursor:pointer; user-select:none; border:1px solid #333;
}
.badge-red{ background:red; color:#fff; }
.badge-green{ background:lime; color:#000; }
.badge.is-muted{ opacity:.55; }

/* Ikon marker kustom */
.nw-laser-divicon .nw-laser-ico,
.nw-empty-divicon .nw-hollow{
  box-sizing:border-box;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Pointer */
.leaflet-marker-icon{ cursor:pointer; }

#logo{
    cursor: pointer;
    width: 180px;
	height:26px
}

#login {
	cursor: pointer;
	display: flex;
	align-items: center; /* Vertically centers content */
	justify-content: center; /* Horizontally centers content */
	height: 14px; /* Example height */
    float: right;
    width: 45px;
    padding: 0.4em;
    border: 1px solid #333;
    border-radius: 0.125rem;
}


#login:hover{
	background:cornflowerblue;
	cursor:pointer;
	color:white;
}

/* Reload control */
.leaflet-control-reload {
    width: 45px;
    height: 45px;
    background: white;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor:pointer;
    font-size: 11px;
    font-weight: bold;
}

/* ZoomX control */
.leaflet-control-zoomx {
    width: 30px;
    height: 30px;
    background: white;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    line-height:1.1;
}

/* Modal */
#reloadModal {
    position: fixed;
    left:0;top:0;right:0;bottom:0;
    background: rgba(0,0,0,.45);
    display:none;
    z-index:999999;
}
#reloadModal.open { display:flex;align-items:center;justify-content:center; }
#reloadModal .box {
    background:white;padding:16px;border-radius:10px;width:220px;
    font-family:var(--app-font);
    box-shadow:0 6px 20px rgba(0,0,0,.25);
}
#reloadModal .interval-option{
    padding:8px;border:1px solid #ddd;border-radius:6px;
    margin-top:6px;cursor:pointer;text-align:center;
}
#reloadModal .interval-option:hover{background:#eef2ff;}

/* Hide default zoom */
.leaflet-control-zoom { display:none !important; }