* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', sans-serif;
    }

    html, body {
      width: 100%;
      height: 100%;
      overflow: hidden; /* tidak ada scroll global */
      background-color: #0b1320;
      color: #fff;
    }

    .dashboard {
      display: grid;
      grid-template-columns: 320px 1fr 230px;
      grid-template-rows: 60px 1fr;
      height: 100%;
      gap: 10px;
      padding: 10px;
    }

    header {
      grid-column: 1 / 4;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #131c2b;
      border-radius: 10px;
      padding: 0 20px;
    }

    .header-left {
      grid-column: 1 / 2;
      display: flex;
    }

     .header-title, .header-logo {
		 display: flex;
		 flex-direction: column;
		 padding: 0 10px;
	 }

    .header-right {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .status-box {
      background-color: #1b2536;
      border-radius: 8px;
      padding: 6px 12px;
      text-align: center;
      font-size: 12px;
    }

    /* Sidebar kiri */
    .sidebar {
      background-color: #131c2b;
      border-radius: 10px;
      padding: 15px;
      display: flex;
      flex-direction: column;
	  min-height: 0;
    }

    /* Sidebar kanan */
    .rightbar {
      background-color: #131c2b;
      border-radius: 10px;
      padding: 15px;
      display: flex;
      flex-direction: column;
	   min-height: 0;
    }

    .sidebar h3,.rightbar h3 {
      margin-bottom: 8px;
      font-size: 16px;
      color: #8ab4f8;
    }

    .list {
      flex-grow: 1;
      overflow: hidden;
    }
	
    #lists-object .list-item {
		cursor: pointer;
	}

	#lists-object .list-item.selected {
		background-color: #999;
	}

    .list-item {
      background-color: #1b2536;
      border-radius: 8px;
      padding: 8px 8px;
      margin-bottom: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .list-item span {
      font-size: 12px;
    }

    .list-item.active { color: #fff; }
    .list-item.idle { color: #ffb700; }

	.status-box.sos,
	.list-item.sos	{ color: #fff; background-color: #500 !important; }
	.list-item.aman { color: #0f0; }
	.status-box.manusia { color: #0f0; }
	.status-box.alat { color: #0Af; }
	.status-box.logout {
		cursor: pointer;
		padding: 5px 15px;
	}

	.list-item.alert,
	.status-box.alert,
    .list-item.alert1 { color: #fff; background-color: #FF0000 !important; }
	.list-item.alert2 { color: #fff; background-color: #F28C28 !important; }
	.list-item.alert3 { color: #3D3D3D; background-color: #CBD907 !important; }

	.list-item.alert, .list-item.sos {
		cursor: pointer;
	}

	#lists-notif .notif {
		cursor: pointer;
	}
	#lists-notif .notif img {
		border-radius: 5px;
		border: 1px solid #0b1320;
		margin-top: 5px;
	}

    /* Map area */
    .map-area {
      background-color: #1b2536;
      border-radius: 10px;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .map-area img {
      max-width: 80%;
      opacity: 0.9;
    }

    .popup {
	 /*position: absolute;
      bottom: 20px;
      left: 20px;*/
      background-color: #0b1320;
      padding: 10px;
      border-radius: 10px;
      font-size: 11px;
    }

    .search-box input {
      width: 100%;
      padding: 8px;
      border-radius: 6px;
      border: none;
      background-color: #1b2536;
      color: #fff;
      margin-bottom: 12px;
    }

    .activity {
      background-color: #1b2536;
      border-radius: 8px;
      padding: 8px 10px;
      margin-bottom: 8px;
      font-size: 12px;
    }

    .activity.green { border-left: 4px solid #0f0; }
    .activity.yellow { border-left: 4px solid #ffb700; }
    .activity.red { border-left: 4px solid #f44; }
	#viewCCTV {
		
		display: none;
		justify-content: center; 
		background-color: #1b2536;
		border-radius: 8px;
		padding: 8px 8px;
		margin-bottom: 8px;
		justify-content: space-between;
		align-items: center;
	}
	/* #viewCCTV img {
		margin: 5px;
		display: block;
		width: 95%;
		height: 160px;
		border-radius: 8px;
		border: 1px solid grey;
		cursor: pointer;
	} */
	#viewCCTV h3 {
      margin-bottom: 8px;
      font-size: 10px;
      color: #8ab4f8;
	}
    .ptz_control {
	  border-radius: 10px;
      width: 100%;
      height: 100px;
      margin: 5px auto;
      user-select: none;
	  background-color: grey;
      -webkit-user-select: none;
	  display: block;
    }
    .button {
      fill: none;
      stroke: black;
      stroke-width: 4;
      cursor: pointer;
      transition: fill 0.2s;
    }
    .button:hover { fill: #ccc; }         /* Hover abu-abu */
    .button.active { fill: #302d8b; }          /* Klik merah */
    /* Garis simbol + / - */
    .icon-stroke {
      stroke: black;
      stroke-width: 4;
      pointer-events: none;                /* Biar kliknya tetap ke tombol (circle) */
    }
	#closePTZ {
		fill: red !important;
	}
	.section-fill { 
		display: flex; 
		flex-direction: column; 
		flex: 1 1 auto; 
		min-height: 0; 
	}
	.list {
	  overflow-y: auto;        /* aktifkan scroll vertikal jika melebihi 300px */
	  overflow-x: hidden;      /* sembunyikan scroll horizontal */
	  scrollbar-width: thin;   /* (opsional, untuk Firefox) */
	  scrollbar-color: #555 #1b2536; /* (opsional, ubah warna scrollbar) */
	  padding-right: 10px;
	}
	
	#lists-search {
		max-height: 180px;      /* batas tinggi maksimal */
	}
	.list {
		flex: 1 1 auto;
		min-height: 0;
		overflow: auto;
		padding-right: 6px;
		padding-bottom: 10px; /* agar item terakhir tidak ketutup rounded/padding */
		scrollbar-width: thin;
		scrollbar-color: #555 #1b2536;
	}

	/* (opsional) styling scrollbar untuk Chrome/Edge */
	.list::-webkit-scrollbar {
	  width: 6px;
	}
	.list::-webkit-scrollbar-thumb {
	  background-color: #555;
	  border-radius: 10px;
	}
	.list::-webkit-scrollbar-track {
	  background: #1b2536;
	}
	#lists-search .list-item {
		cursor: pointer;
	}
	.custom-popup {
	  background-color: #0b1320;
	  color: #fff;
	  padding: 10px 14px;
	  border-radius: 10px;
	  font-family: 'Segoe UI', sans-serif;
	  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
	  font-size: 10px;
	  width: 200px;
	}
	.custom-popup .popup-header {
	  font-weight: 600;
	  margin-bottom: 6px;
	  border-bottom: 1px solid rgba(255,255,255,0.3);
	  padding-bottom: 4px;
	}
	#selArea {
		color: #fff;
		border: 0;
	}
	.ptzinfo {
		display: none;
	}
	#streambox {
		width: 100%;
		border: 0;
		overflow: hidden;
	}
	#frmMineView {
		width: 100%;
		height: 100%;
		z-index: 1;
		overflow: hidden;
		border: 0;
	}
	iframe {
		border-radius: 10px;
	}
	#btnCloseIframe {
		display: none;
		position: absolute;
		bottom: 10px;
		right: 10px;
		z-index: 2;
		padding: 5px 10px;
		background: red;
		color: #fff;
		border: none;
		border-radius: 4px;
		font-size: 12px;
		cursor: pointer;
	}
	#vidExpand {
		display: block;
		position: absolute;
		bottom: 10px;
		right: 10px;
		z-index: 2;
		border: none;
		opacity: 0.6;
		cursor: pointer;
		width: 25px;
		height: 25px;
	}


/*.app-content { padding: 20px; }*/

/* Toggle */
.sidebar-toggle{
  position: fixed; top: 16px; left: 16px; z-index: 10001;
  padding: 10px 12px; border: 0; border-radius: 10px;
  background: rgba(0,0,0,.75); color: #fff; font-size: 18px; cursor: pointer;
}

/* Backdrop */
.sidebar-backdrop{
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,.45);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}

/* Sidebar overlay */
.sidebar-menu{
  position: fixed; top: 0; left: 0; height: 100vh; width: 280px; z-index: 10002;
  background: #1f2937; color: #fff;
  transform: translateX(-100%);
  transition: transform .25s ease;
  box-shadow: 8px 0 24px rgba(0,0,0,.25);
  display: flex; flex-direction: column;
}

.sidebar-header{
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px; border-bottom: 1px solid rgba(255,255,255,.12);
}
.sidebar-title{ font-weight: 700; }
.sidebar-close{ background: transparent; border: 0; color: #fff; font-size: 18px; cursor: pointer; }

.sidebar-nav{ display: flex; flex-direction: column; padding: 12px; gap: 8px; }
.sidebar-nav a{
  color: #fff; text-decoration: none; padding: 10px 12px; border-radius: 10px;
}
.sidebar-nav a:hover{ background: rgba(255,255,255,.12); }
.sidebar-nav a.active{ background: rgba(255,255,255,.18); }

body.sidebar-open .sidebar-menu{ transform: translateX(0); }
body.sidebar-open .sidebar-backdrop{ opacity: 1; pointer-events: auto; }

@media (max-width: 480px){
  .sidebar-menu{ width: 85vw; max-width: 320px; }
}