/* =====================================================
   BMB SMART ROAD
   SMART GIS DASHBOARD STYLE
===================================================== */
/* =====================================
   TOP 20 RPI LINE ANIMATION
===================================== */
#waveLabelLine line{

pointer-events:none;

}

#topRpiRadarChart{

width:100%;

height:520px;

}



.rpi-point{

cursor:pointer;

filter:
drop-shadow(
0 0 8px #22c55e
);

}



#rpiTooltip{


	position:fixed;


	background:#0f172a;


	border:1px solid #22c55e;


	padding:12px 18px;


	border-radius:12px;


	color:white;


	font-size:13px;


	z-index:99999;


	display:none;


	pointer-events:none;


	box-shadow:

	0 0 20px rgba(34,197,94,.5);



	text-align:center;


	white-space:nowrap;


	transform:none;


}



#topRpiRadarChart 
.apexcharts-line-series path{


	filter:
	drop-shadow(
	0 0 8px #22c55e
	);


}





#topRpiRadarChart 
.apexcharts-marker{


	transition:.8s;


}
/* =================================
   ANIMASI GARIS GELOMBANG
================================= */


@keyframes waveMove{


from{

    stroke-dashoffset:0;

}


to{

    stroke-dashoffset:-40;

}


}



.apexcharts-line-series path{


    filter:
    drop-shadow(
    0 0 8px #22c55e
    );


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


body{

  background:#07111f;
  color:#fff;
  overflow-x:hidden;

}

.legend-line{
    display:inline-block;
    width:20px;
    height:5px;
    margin-right:10px;
    vertical-align:middle;
    border-radius:5px;
}

.legend-line.nasional{
    background:#e31a1c;
}

.legend-line.provinsi{
    background:#e53935;
    height:3px;
    opacity: 1
}

.wrapper{

  display:flex;
  min-height:100vh;

}



/* =====================================================
   SIDEBAR
===================================================== */


.sidebar{

  width:260px;
  background:#0b1728;
  min-height:100vh;
  padding:25px 20px;
  position:fixed;
  left:0;
  top:0;
  bottom:0;
  border-right:1px solid rgba(255,255,255,.08);

}



.logo-box{

  display:flex;
  align-items:center;
  gap:15px;
  margin-bottom:40px;

}


.logo-box img{

  width:55px;
  height:55px;
  object-fit:contain;

}



.logo-box h2{

  font-size:28px;
  font-weight:800;
  margin:0;
  color:#00e676;

}



.logo-box span{

  font-size:12px;
  color:#9caec4;
  letter-spacing:2px;

}




.menu{

  list-style:none;
  padding:0;

}



.menu li{

  padding:14px 15px;
  margin-bottom:8px;
  border-radius:10px;
  color:#b7c5d8;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:15px;
  transition:.3s;

}



.menu li i{

  width:22px;
  font-size:17px;

}



.menu li:hover,
.menu li.active{

  background:linear-gradient(
    90deg,
    rgba(0,230,118,.25),
    rgba(0,230,118,.05)
  );

  color:#00e676;

}





/* =====================================================
   CONTENT
===================================================== */

.content{

  margin-left:280px;

  width:calc(100% - 280px);

  padding:30px;

}





/* =====================================================
   TOPBAR
===================================================== */


.topbar{

  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:25px;

}



.topbar h1{

  font-size:28px;
  font-weight:700;
  margin-bottom:5px;

}



.topbar p{

  color:#94a6bb;
  font-size:14px;

}



.topbar-right{

  display:flex;
  align-items:center;
  gap:12px;

}




.datetime{

  background:#0d1d31;
  padding:10px 18px;
  border-radius:12px;
  display:flex;
  flex-direction:column;
  text-align:right;
  font-size:13px;

}



.topbar button{

  width:42px;
  height:42px;
  border-radius:10px;
  border:none;
  background:#10243b;
  color:white;
  cursor:pointer;

}


.topbar button:hover{

  background:#00e676;
  color:#06101c;

}
/* =====================================================
   KPI CARDS
===================================================== */


.cards{

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:25px;

  margin-bottom:30px;


}



.card-dashboard{

 background:#0d1b2e;
 border-radius:18px;
 padding:20px;
 display:flex;
 align-items:center;
 gap:18px;
 border:1px solid rgba(255,255,255,.06);
 box-shadow:0 10px 25px rgba(0,0,0,.25);
 transition:.3s;

}



.card-dashboard:hover{

 transform:translateY(-5px);
 border-color:#00e676;

}



.card-icon{

 width:65px;
 height:65px;
 border-radius:18px;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:28px;

}



.bg-green{

 background:rgba(0,230,118,.15);
 color:#00e676;

}


.bg-blue{

 background:rgba(33,150,243,.15);
 color:#2196f3;

}



.bg-orange{

 background:rgba(255,152,0,.15);
 color:#ff9800;

}



.bg-purple{

 background:rgba(156,39,176,.15);
 color:#ce93d8;

}




.card-dashboard small{

 color:#8fa4ba;
 font-size:11px;
 letter-spacing:1px;

}



.card-dashboard h2{

 margin:5px 0;
 font-size:30px;
 font-weight:800;

}



.card-dashboard span{

 color:#9cafc3;
 font-size:13px;

}





/* =====================================================
   DASHBOARD GRID
===================================================== */


.dashboard-grid{

  display:grid;

  grid-template-columns:repeat(2,1fr);

  gap:20px;

  margin-bottom:20px;

}



/* =====================================================
   PANEL
===================================================== */


.panel{

 background:#0d1b2e;
 border-radius:18px;
 border:1px solid rgba(255,255,255,.06);
 overflow:hidden;
 box-shadow:0 10px 25px rgba(0,0,0,.25);

}




.panel-header{

 height:60px;
 padding:0 20px;
 display:flex;
 justify-content:space-between;
 align-items:center;
 border-bottom:1px solid rgba(255,255,255,.06);

}



.panel-header h4{

 font-size:16px;
 margin:0;
 font-weight:600;

}



.btn-option{

 border:none;
 background:transparent;
 color:#8ea3ba;
 width:35px;
 height:35px;
 border-radius:8px;

}



.btn-option:hover{

 background:#102840;
 color:#00e676;

}



.panel-body{
 background:transparent;
 padding:20px;
height: 420px;
}

.panel-body2{
 background:transparent;
 padding:20px;
 
}



/* =====================================================
   PIE CHART
===================================================== */


#pieChart{

 min-height:250px;

}




/* =====================================================
   STATUS TABLE
===================================================== */


.table{

 margin:0;

}



.table td{

 color:#dce7f3;
 border:none;

}



.badge{

 padding:8px 14px;
 border-radius:20px;
 font-size:12px;

}



.bg-orange{

 background:#ff9800!important;

}





/* =====================================================
   MAP
===================================================== */
.map-section{

  margin-bottom:20px;

}



.map-panel{

 height:100%;

}



#map{

  width:100%;

  height:550px;

  border-radius:0 0 18px 18px;

}


.leaflet-control-zoom a{

 background:#0d1b2e!important;
 color:white!important;
 border:none!important;

}



.leaflet-control-attribution{

 background:rgba(0,0,0,.5)!important;
 color:white!important;

}




/* =====================================================
   RIGHT SUMMARY
===================================================== */


.summary-item{

 display:flex;
 justify-content:space-between;
 align-items:center;
 padding:15px 0;
 border-bottom:1px solid rgba(255,255,255,.06);

}



.summary-item:last-child{

 border:none;

}



.summary-item span{

 color:#9aadc1;

}



.summary-item strong{

 font-size:20px;
 color:#00e676;

}
/* =====================================================
   RADIAL CHART
===================================================== */


#radialChart{

  min-height:260px;

}




/* =====================================================
   TREND CHART
===================================================== */


.trend-wrapper{

  margin-top:20px;

}



.trend-wrapper .panel-body{

  padding:15px 20px 25px;

}



#trendChart{

  min-height:320px;

}




/* =====================================================
   APEXCHART DARK THEME
===================================================== */


.apexcharts-canvas{

  background:transparent!important;

}



.apexcharts-text{

  fill:#cbd7e6!important;

}



.apexcharts-title-text{

  fill:white!important;

}



.apexcharts-legend-text{

  color:#d6e2ef!important;

}



.apexcharts-tooltip{

  background:#0d1b2e!important;
  color:white!important;
  border:1px solid rgba(255,255,255,.1)!important;

}


/* ==========================
   MENU LINK
========================== */

.menu li a{

  display:flex;
  align-items:center;
  gap:15px;

  width:100%;

  color:inherit;
  text-decoration:none;

}

.menu li a:hover{

  color:inherit;
  text-decoration:none;

}

.menu li a:visited{

  color:inherit;

}

.menu li a:active{

  color:inherit;

}

/* =====================================================
   CUSTOM SCROLLBAR
===================================================== */


::-webkit-scrollbar{

  width:8px;

}



::-webkit-scrollbar-track{

  background:#07111f;

}



::-webkit-scrollbar-thumb{

  background:#20364f;
  border-radius:10px;

}



::-webkit-scrollbar-thumb:hover{

  background:#00e676;

}





/* =====================================================
   ANIMATION
===================================================== */


.card-dashboard,
.panel{

  animation:fadeUp .5s ease;

}



@keyframes fadeUp{

  from{

    opacity:0;
    transform:translateY(20px);

  }


  to{

    opacity:1;
    transform:translateY(0);

  }

}





/* =====================================================
   RESPONSIVE
===================================================== */


@media(max-width:1400px){


  .dashboard-grid{

    grid-template-columns:260px 1fr 260px;

  }


/* =====================================================
   RPI DASHBOARD
   KONDISI JALAN + 20 RPI TERTINGGI
===================================================== */

.rpi-dashboard-grid {
    width: 100%;
    max-width: 100%;

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 20px;

    margin-bottom: 20px;
}


/* =====================================================
   CARD RPI
===================================================== */

.rpi-dashboard-grid .panel {
    width: 100%;
    min-width: 0;
    max-width: 100%;
}


/* =====================================================
   BODY CARD
===================================================== */

.rpi-dashboard-grid .panel-body {
    width: 100%;
    min-width: 0;
}


/* =====================================================
   GRAFIK KONDISI JALAN
===================================================== */

#pieChart {
    width: 100%;
    max-width: 100%;
}


/* =====================================================
   GRAFIK 20 RPI
===================================================== */

#topRpiRadarChart {
    width: 100%;
    max-width: 100%;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1100px) {

    .rpi-dashboard-grid {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* =====================================================
   SMARTPHONE
===================================================== */

@media (max-width: 768px) {

    .rpi-dashboard-grid {
        width: 100% !important;
        max-width: 100% !important;

        display: grid;
        grid-template-columns: 1fr;

        gap: 15px;

        margin: 0 0 15px 0;
        padding: 0;
    }

    .rpi-dashboard-grid .panel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin: 0;
    }

    .rpi-dashboard-grid .panel-body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        overflow: hidden;
    }

    #pieChart,
    #topRpiRadarChart {
        width: 100% !important;
        max-width: 100% !important;

        overflow: hidden;
    }

}


    /* ==============================================
       PANEL 20 RPI
    ============================================== */

    .rpi-dashboard-grid .panel-top-rpi {
        width: 100% !important;
        max-width: 100% !important;
height: 50px;
        min-width: 0 !important;

        margin: 0;
    }


    /* ==============================================
       BODY PANEL
    ============================================== */

    .rpi-dashboard-grid .panel-body {
        width: 100% !important;
        max-width: 100% !important;

        min-width: 0 !important;

        overflow: hidden;
    }


    /* ==============================================
       CHART RPI
    ============================================== */

    #topRpiRadarChart {

        width: 100% !important;
        max-width: 100% !important;

        overflow: hidden;
    }


    /* ==============================================
       CHART KONDISI
    ============================================== */

    #pieChart {

        width: 100% !important;
        max-width: 100% !important;

        overflow: hidden;
    }

}
  .cards{

    grid-template-columns:repeat(3,1fr);

  }


}





@media(max-width:1100px){


  .sidebar{

    width:80px;

  }


  .logo-box div,
  .menu li{

    font-size:0;

  }


  .menu li i{

    font-size:20px;

  }



  .content{

    margin-left:80px;
    width:calc(100% - 80px);

  }



  .dashboard-grid{

    grid-template-columns:1fr;

  }



}





@media(max-width:768px){


  .content{

    padding:15px;

  }



  .topbar{

    flex-direction:column;
    align-items:flex-start;
    gap:15px;

  }



  .topbar-right{

    width:100%;

  }



  .cards{

    grid-template-columns:1fr;

  }


}




/* =====================================================
   MAP FULL HEIGHT FIX
===================================================== */


.center-panel{

  min-height:520px;

}



.left-panel,
.right-panel{

  display:flex;
  flex-direction:column;

}




/* =====================================================
   SELECT YEAR
===================================================== */


.form-select{

  background:#10243b;
  color:white;
  border:none;

}



.form-select option{

  background:#0d1b2e;

}




/* =====================================================
   GLOW EFFECT
===================================================== */


.card-dashboard h2{

  text-shadow:
  0 0 10px rgba(0,230,118,.25);

}



.logo-box h2{

  text-shadow:
  0 0 15px rgba(0,230,118,.4);

}
.gis-search{

 width:280px;

}


.gis-search input,
.gis-search select{

 background:#111827;

 color:white;

 border:1px solid #334155;

}



.gis-search input::placeholder{

 color:#aaa;

}
.table-dark{

 background:#111827;

}



.table-dark tbody tr:hover{

 background:#1e293b;

}



.table td,
.table th{

 vertical-align:middle;

}
/* =====================================
   LEGEND CARD GIS
===================================== */

.card-legend{

 background:

 rgba(0,0,0,0.75);


 backdrop-filter:

 blur(8px);


 -webkit-backdrop-filter:

 blur(8px);


 color:white;


 padding:15px 18px;


 border-radius:12px;


 width:160px;


 box-shadow:

 0 8px 25px rgba(0,0,0,0.45);


 border:

 1px solid rgba(255,255,255,0.15);


}



.card-legend h6{


 margin:0 0 12px 0;


 font-size:14px;


 font-weight:700;


 color:white;


 text-align:center;


}



.card-legend p{


 margin:8px 0;


 font-size:13px;


 display:flex;


 align-items:center;


 gap:8px;


}



.lg{


 width:14px;


 height:14px;


 border-radius:50%;


 display:inline-block;


}



.lg.green{

 background:#00e676;

}



.lg.yellow{

 background:#ffc107;

}



.lg.orange{

 background:#ff9800;

}



.lg.red{

 background:#ff1744;

}
/* SCALE BAR DARK MODE */

.leaflet-control-scale-line{

  background:rgba(0,0,0,0.65);

  color:white;

  border-color:white;

  font-size:12px;

  padding:3px 6px;

  border-radius:5px;

}
/* =====================================
   MY LOCATION MARKER
===================================== */


.my-location{

 background:none;

 border:none;

}



.pulse-location{

 width:22px;

 height:22px;

 background:#2196f3;

 border:4px solid white;

 border-radius:50%;


 box-shadow:

 0 0 0 10px rgba(33,150,243,0.3),

 0 0 15px rgba(33,150,243,0.8);

}
/* =====================================
   CARD BASEMAP CONTROL
===================================== */

.leaflet-control-layers {

  background:

  rgba(0,0,0,0.75) !important;


  backdrop-filter:

  blur(8px);


  -webkit-backdrop-filter:

  blur(8px);


  color:white;


  border-radius:12px;


  border:

  1px solid rgba(255,255,255,0.2);


  box-shadow:

  0 8px 25px rgba(0,0,0,0.5);


  padding:10px;


}



/* Tombol buka tutup layer */

.leaflet-control-layers-toggle {


  background-color:

  rgba(0,0,0,0.75);


  border-radius:10px;


}



/* Teks pilihan layer */

.leaflet-control-layers label {


  color:white;


  font-size:13px;


  font-weight:500;


  padding:5px 8px;


}



/* Radio / checkbox */

.leaflet-control-layers-selector {


  accent-color:#00e676;


}



/* Garis pemisah */

.leaflet-control-layers-separator {


  border-top:

  1px solid rgba(255,255,255,0.2);

}

/* ===========================================
MODAL DETAIL GIS
=========================================== */

.detail-grid{

  display:grid;

  grid-template-columns:220px 1fr;

  gap:12px;

  margin-bottom:12px;

}

.detail-label{

  color:#9ca3af;

  font-weight:600;

}

.detail-value{

  color:#fff;

  font-weight:500;

}

.detail-card{

  background:#1d232f;

  border:1px solid #343a40;

  border-radius:10px;

  padding:18px;

  margin-bottom:15px;

}

.detail-title{

  color:#ffc107;

  margin-bottom:18px;

  font-size:18px;

  border-bottom:1px solid #343a40;

  padding-bottom:10px;

}


/*//kondisi jembatan*/
/* =====================================================
   KOLOM KONDISI JEMBATAN
===================================================== */

.kolom-kondisi {
    width: 280px;
    min-width: 280px;
    max-width: 280px;
    white-space: normal !important;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

#tabelJembatan td:nth-child(9) {
    width: 280px;
    min-width: 280px;
    max-width: 280px;

    white-space: normal !important;
    word-wrap: break-word;
    overflow-wrap: anywhere;

    vertical-align: middle;
}

/* Badge kondisi jangan memaksa tabel melebar */
#tabelJembatan td:nth-child(9) .badge {
    display: inline-block;

    white-space: normal !important;

    word-wrap: break-word;
    overflow-wrap: anywhere;

    line-height: 1.4;

    max-width: 100%;
}