/* ==========================================================
   PLN DASHBOARD + FORM UNIFIED CSS
   Compatible with existing dashboard & form HTML
   ========================================================== */

:root{
  --pln-blue:#1a3a6e;
  --pln-blue2:#2251a3;
  --pln-yellow:#f5a623;
  --pln-green:#22c55e;
  --pln-red:#ef4444;
  --pln-amber:#f59e0b;
  --pln-bg:#eef2f7;
  --pln-purple:#49096e;

  --sidebar-width:290px;
  --sidebar-collapsed-width:90px;

  --radius:14px;

  --shadow-sm:0 2px 10px rgba(0,0,0,.05);
  --shadow-md:0 6px 20px rgba(0,0,0,.08);
  --shadow-lg:0 10px 30px rgba(0,0,0,.12);

  --transition:.25s ease;
}

/* ==========================================================
   RESET
========================================================== */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:'Inter',sans-serif;
  font-size:14px;
  min-height:100vh;
  overflow-x:hidden;
  color:#1e293b;

  background:
    radial-gradient(circle at top right,
      rgba(34,81,163,.08),
      transparent 30%),

    radial-gradient(circle at bottom left,
      rgba(245,166,35,.08),
      transparent 25%),

    var(--pln-bg);
}

/* ==========================================================
   LAYOUT
========================================================== */

.dashboard-layout{
  display:flex;
  min-height:100vh;
}

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

.main-sidebar{
  width:var(--sidebar-width);

  background:
    linear-gradient(
      180deg,
      #0f172a 0%,
      #132544 45%,
      #1a3a6e 100%
    );

  color:#fff;

  position:fixed;
  left:0;
  top:0;
  bottom:0;

  z-index:1200;

  display:flex;
  flex-direction:column;

  overflow:hidden;

  border-right:1px solid rgba(255,255,255,.08);

  box-shadow:
    6px 0 30px rgba(0,0,0,.2);

  transition:
    width .3s cubic-bezier(.4,0,.2,1),
    transform .3s cubic-bezier(.4,0,.2,1);
}

.main-sidebar.collapsed{
  width:var(--sidebar-collapsed-width);
}

/* collapsed state */

.main-sidebar.collapsed .brand-title,
.main-sidebar.collapsed .brand-subtitle,
.main-sidebar.collapsed .sidebar-label,
.main-sidebar.collapsed .sidebar-menu-item span,
.main-sidebar.collapsed .sidebar-footer,
.main-sidebar.collapsed .wilayah-select{
  opacity:0;
  visibility:hidden;
  width:0;
  overflow:hidden;
}

.main-sidebar.collapsed .sidebar-brand{
  justify-content:center;
}

.main-sidebar.collapsed .sidebar-menu-item{
  justify-content:center;
  padding:14px 0;
}

.main-sidebar.collapsed .sidebar-section{
  padding:10px;
}

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

.main-content{
  flex:1;

  margin-left:var(--sidebar-width);

  width:calc(100% - var(--sidebar-width));

  min-width:0;

  transition:
    margin-left .3s cubic-bezier(.4,0,.2,1),
    width .3s cubic-bezier(.4,0,.2,1);
}

.main-content.sidebar-collapsed{
  margin-left:var(--sidebar-collapsed-width);
  width:calc(100% - var(--sidebar-collapsed-width));
}

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

.sidebar-top{
  padding:22px 20px;

  min-height:88px;

  border-bottom:1px solid rgba(255,255,255,.08);

  display:flex;
  align-items:center;
  justify-content:space-between;
}

.sidebar-brand{
  display:flex;
  align-items:center;
  gap:14px;
  overflow:hidden;
}

.brand-icon{
  width:52px;
  height:52px;

  border-radius:14px;

  background:
    linear-gradient(
      135deg,
      #f5a623,
      #facc15
    );

  color:#1a3a6e;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:24px;

  flex-shrink:0;

  box-shadow:
    0 8px 20px rgba(245,166,35,.3);
}

.brand-title{
  font-size:17px;
  font-weight:800;
  line-height:1.2;
  white-space:nowrap;
}

.brand-subtitle{
  font-size:12px;
  opacity:.7;
  white-space:nowrap;
}

.sidebar-section{
  padding:20px;
  transition:padding .3s ease;
}

.sidebar-label{
  display:block;

  margin-bottom:10px;

  font-size:12px;
  font-weight:700;

  letter-spacing:.5px;
  text-transform:uppercase;

  opacity:.8;

  white-space:nowrap;
}

.wilayah-select{
  width:100%;

  border:none;
  border-radius:12px;

  padding:12px 14px;

  background:rgba(255,255,255,.12);

  color:#fff;

  font-weight:700;

  backdrop-filter:blur(10px);
}

.wilayah-select option{
  color:#000;
}

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

.sidebar-menu{
  padding:8px 14px;
  flex:1;
}

.sidebar-menu-item{
  display:flex;
  align-items:center;
  gap:14px;

  padding:14px 16px;

  margin-bottom:8px;

  border-radius:14px;

  text-decoration:none;

  color:rgba(255,255,255,.82);

  font-weight:600;

  white-space:nowrap;

  overflow:hidden;

  transition:all var(--transition);
}

.sidebar-menu-item i{
  font-size:18px;
  flex-shrink:0;
}

.sidebar-menu-item:hover{
  background:rgba(255,255,255,.1);
  color:#fff;
}

.main-sidebar:not(.collapsed) .sidebar-menu-item:hover{
  transform:translateX(4px);
}

.sidebar-menu-item.active{
  position:relative;

  background:
    linear-gradient(
      135deg,
      rgba(245,166,35,.95),
      rgba(251,191,36,.95)
    );

  color:#1a3a6e;

  box-shadow:
    0 8px 18px rgba(245,166,35,.25);
}

.sidebar-menu-item.active::before{
  content:'';

  position:absolute;

  left:0;
  top:10%;

  width:4px;
  height:80%;

  border-radius:0 10px 10px 0;

  background:#fff;
}

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

.sidebar-footer{
  padding:18px;
  overflow:hidden;

  border-top:1px solid rgba(255,255,255,.08);
}

.sidebar-footer-box{
  display:flex;
  align-items:center;
  gap:12px;

  padding:14px;

  border-radius:16px;

  background:rgba(255,255,255,.08);

  white-space:nowrap;
}

.sidebar-footer-box i{
  font-size:22px;
  color:var(--pln-yellow);
  flex-shrink:0;
}

.footer-title{
  font-size:13px;
  font-weight:800;
}

.footer-subtitle{
  font-size:11px;
  opacity:.7;
}

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

.sidebar-toggle,
.sidebar-close{
  border:none;
  cursor:pointer;
  flex-shrink:0;
  transition:all var(--transition);
}

.sidebar-toggle{
  width:42px;
  height:42px;

  border-radius:10px;

  background:rgba(26,58,110,.1);

  color:var(--pln-blue);

  font-size:22px;

  display:flex;
  align-items:center;
  justify-content:center;
}

.sidebar-toggle.active{
  background:var(--pln-blue);
  color:#fff;
}

.sidebar-close{
  width:36px;
  height:36px;

  border-radius:10px;

  background:rgba(255,255,255,.1);

  color:#fff;
}

.sidebar-overlay{
  position:fixed;
  inset:0;

  z-index:1100;

  background:rgba(15,23,42,.55);

  backdrop-filter:blur(4px);

  opacity:0;
  visibility:hidden;

  transition:all .3s ease;
}

.sidebar-overlay.show{
  opacity:1;
  visibility:visible;
}

/* ==========================================================
   HEADER
========================================================== */

.main-header{
  position:sticky;
  top:0;

  z-index:1000;

  background:rgba(255,255,255,.9);

  backdrop-filter:blur(12px);

  border-radius:14px;

  padding:16px 24px;

  margin-bottom:20px;

  color:#08023a;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;

  box-shadow:
    0 4px 20px rgba(26,58,110,.12);
}

.header-title{
  flex:1;

  font-size:clamp(1rem,2.5vw,1.8rem);

  font-weight:900;

  letter-spacing:.5px;
  text-align: center;
}

/* ==========================================================
   CARD SYSTEM
========================================================== */

.form-card,
.section-card{
  background:rgba(255,255,255,.92);

  backdrop-filter:blur(10px);

  border-radius:14px;

  border:1px solid #e2e8f0;

  overflow:hidden;

  margin-bottom:20px;

  box-shadow:var(--shadow-sm);

  transition:all var(--transition);
}

.form-card:hover,
.section-card:hover{
  transform:translateY(-2px);

  box-shadow:var(--shadow-md);
}

/* ==========================================================
   CARD HEADERS
========================================================== */

.form-card-header,
.section-header{
  position:relative;
  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      var(--pln-blue) 0%,
      var(--pln-blue2) 100%
    );

  padding:12px 20px;

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

  color:#fff;
}

.form-card-header::after,
.section-header::after{
  content:'';

  position:absolute;

  top:0;
  left:-40%;

  width:40%;
  height:100%;

  background:rgba(255,255,255,.12);

  transform:skewX(-25deg);
}

.form-card-header.amber{
  background:
    linear-gradient(135deg,#d97706,#f59e0b);
}

.form-card-header.red,
.section-header.red{
  background:
    linear-gradient(135deg,#dc2626,#b91c1c);
}

.form-card-header.green{
  background:
    linear-gradient(135deg,#16a34a,#22c55e);
}

.form-card-header i,
.section-header i{
  font-size:16px;
}

.form-card-header h6,
.section-header h6{
  margin:0;

  font-size:13px;
  font-weight:800;

  letter-spacing:.5px;
}

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

.form-card-body,
.section-body{
  padding:20px;
}

/* ==========================================================
   INFO CARD
========================================================== */

.info-card{
  height:100%;

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

  padding:14px 16px;

  background:rgba(255,255,255,.92);

  border:1px solid #e2e8f0;

  border-radius:12px;

  box-shadow:var(--shadow-sm);

  transition:all var(--transition);
}

.info-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}

.info-card-icon{
  width:46px;
  height:46px;

  border-radius:12px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:20px;
  color:#fff;

  flex-shrink:0;
}

.info-card-icon.green{
  background:linear-gradient(135deg,#22c55e,#16a34a);
}

.info-card-icon.sky{
  background:linear-gradient(135deg,#38bdf8,#0284c7);
}

.info-card-icon.amber{
  background:linear-gradient(135deg,#fbbf24,#d97706);
}

.info-card-icon.rose{
  background:linear-gradient(135deg,#fb7185,#e11d48);
}

.info-card-label{
  font-size:10px;
  font-weight:700;

  letter-spacing:.8px;
  text-transform:uppercase;

  color:#94a3b8;
}

.info-card-value{
  font-size:15px;
  font-weight:800;

  color:#1e293b;

  line-height:1.3;
}

/* ==========================================================
   FORM
========================================================== */

.form-label{
  margin-bottom:5px;

  font-size:12px;
  font-weight:700;

  color:#64748b;

  letter-spacing:.5px;
  text-transform:uppercase;
}

.form-control,
.form-select{
  border:1.5px solid #e2e8f0;

  border-radius:10px;

  padding:10px 14px;

  font-size:13px;
  font-weight:500;

  background:#fff;

  transition:
    border-color .2s,
    box-shadow .2s,
    transform .2s;
}

.form-control:hover,
.form-select:hover{
  border-color:#94a3b8;
}

.form-control:focus,
.form-select:focus{
  outline:none;

  border-color:var(--pln-blue2);

  box-shadow:
    0 0 0 3px rgba(34,81,163,.12);
}

/* ==========================================================
   STATUS / DYNAMIC ROWS
========================================================== */

.status-row,
.dynamic-row,
.coord-row{
  position:relative;

  background:#f8fafc;

  border:1px solid #e2e8f0;

  border-radius:10px;

  padding:14px 16px;

  margin-bottom:10px;
}

.status-row:last-child,
.dynamic-row:last-child,
.coord-row:last-child{
  margin-bottom:0;
}

.status-row-label{
  margin-bottom:8px;

  font-size:12px;
  font-weight:700;

  color:#1e293b;
}

.btn-remove-row{
  position:absolute;

  top:10px;
  right:10px;

  border:none;
  cursor:pointer;

  border-radius:8px;

  padding:4px 10px;

  background:#fee2e2;

  color:#dc2626;

  font-size:12px;
  font-weight:700;

  transition:background .2s;
}

.btn-remove-row:hover{
  background:#fca5a5;
}

/* ==========================================================
   BUTTONS
========================================================== */

.btn-pln-primary,
.btn-pln-secondary,
.btn-add-row{
  transition:all var(--transition);
}

.btn-pln-primary:hover,
.btn-pln-secondary:hover{
  transform:translateY(-2px);
}

.btn-pln-primary{
  border:none;

  border-radius:10px;

  padding:11px 28px;

  background:
    linear-gradient(
      135deg,
      var(--pln-blue),
      var(--pln-blue2)
    );

  color:#fff;

  font-size:14px;
  font-weight:700;

  cursor:pointer;

  display:inline-flex;
  align-items:center;
  gap:8px;
}

.btn-pln-primary:hover{
  opacity:.9;
}

.btn-pln-secondary{
  border:none;

  border-radius:10px;

  padding:11px 22px;

  background:#f1f5f9;

  color:#1e293b;

  font-size:14px;
  font-weight:700;

  cursor:pointer;

  display:inline-flex;
  align-items:center;
  gap:8px;
}

.btn-pln-secondary:hover{
  background:#e2e8f0;
}

.btn-add-row{
  width:100%;

  border-radius:10px;

  border:2px dashed #bfdbfe;

  padding:10px 18px;

  background:#eff6ff;

  color:var(--pln-blue2);

  font-size:13px;
  font-weight:700;

  cursor:pointer;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}

.btn-add-row:hover{
  background:#dbeafe;
}

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

.info-table{
  width:100%;
}

.info-table td{
  padding:4px 8px 4px 0;
  vertical-align:top;
  font-size:13px;
}

.info-table td:first-child{
  width:110px;

  font-weight:700;

  white-space:nowrap;

  color:#1e293b;
}

/* ==========================================================
   MAP
========================================================== */

.map-header,
.sld-header{
  display:flex;
  align-items:center;
  gap:6px;

  padding:7px 12px;

  background:rgba(26,58,110,.08);

  color:var(--pln-blue);

  font-size:11px;
  font-weight:800;

  text-transform:uppercase;
}

.map-header{
  border:1px solid #e2e8f0;
  border-bottom:none;

  border-radius:10px 10px 0 0;
}

#project-map{
  width:100%;
  height:220px;

  border-radius:0 0 10px 10px;
}

.sld-wrapper{
  border:1px solid #e2e8f0;
  border-radius:10px;
  overflow:hidden;
}

.sld-body{
  padding:12px 14px;
}

#sld-canvas{
  width:100%;
  height:160px;
}

/* ==========================================================
   STATUS BLOCK
========================================================== */

.status-block{
  margin-bottom:16px;
}

.status-block:last-child{
  margin-bottom:0;
}

.status-title,
.status-pct{
  font-size:13px;
}

.status-title{
  font-weight:700;
  color:#1e293b;
}

.status-pct{
  color:#64748b;
}

.progress{
  height:10px;

  margin:6px 0;

  border-radius:999px;

  background:#e2e8f0;
}

.progress-bar{
  border-radius:999px;

  transition:
    width 1.2s cubic-bezier(.4,0,.2,1);
}

    /* ===== STATUS BARS ===== */
    .status-block { margin-bottom:16px; }
    .status-block:last-child { margin-bottom:0; }
    .status-title { font-size:13px; font-weight:700; color:#1e293b; }
    .status-pct { font-size:13px; color:#64748b; }
    .progress { height:10px; border-radius:999px; background:#e2e8f0; margin:6px 0; }
    .progress-bar { border-radius:999px; transition:width 1.2s cubic-bezier(.4,0,.2,1); }
    .sub-items { display:flex; flex-wrap:wrap; gap:6px 20px; margin-top:4px; }
    .sub-item { display:flex; align-items:center; gap:5px; font-size:11px; color:#334155; }
    .sub-item i { font-size:13px; }
    .sub-item i.selesai { color:var(--pln-green); }
    .sub-item i.proses  { color:var(--pln-amber); }
    .sub-item i.belum   { color:var(--pln-red); }

/* ==========================================================
   TIMELINE
========================================================== */

.timeline-wrap{
  display:flex;
  align-items:flex-start;

  overflow-x:auto;

  gap:0;

  padding-bottom:4px;
}

.tl-step{
  flex:1;

  min-width:110px;

  position:relative;

  display:flex;
  flex-direction:column;
  align-items:center;
}

.tl-step:not(:last-child)::after{
  content:'';

  position:absolute;

  top:23px;
  left:50%;

  width:100%;
  height:2px;

  border-top:
    2px dashed rgba(26,58,110,.25);

  z-index:0;
}

.tl-icon{
  position:relative;
  z-index:1;

  width:46px;
  height:46px;

  border-radius:12px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:20px;

  box-shadow:
    0 2px 8px rgba(0,0,0,.15);

  transition:transform .2s;
}

.tl-icon:hover{
  transform:scale(1.08);
}

.tl-icon.selesai{
  background:linear-gradient(135deg,#22c55e,#16a34a);
  color:#fff;
}

.tl-icon.proses{
  background:linear-gradient(135deg,#fbbf24,#d97706);
  color:#fff;
}

.tl-icon.belum{
  background:#e2e8f0;
  color:#94a3b8;
}

.tl-label{
  margin-top:8px;

  max-width:90px;

  font-size:11px;
  font-weight:700;

  line-height:1.3;
  text-align:center;

  color:#1e293b;
}

.tl-date{
  margin-top:2px;

  font-size:10px;

  color:#64748b;

  text-align:center;
}

.tl-status{
  margin-top:4px;
  font-size:18px;
}

.tl-status.selesai{
  color:var(--pln-green);
}

.tl-status.proses{
  color:var(--pln-amber);
}

.tl-status.belum{
  color:#cbd5e1;
}

.timeline-image{
  width:55px;
  height:55px;
  object-fit:contain;
}

/* ==========================================================
   ISSUES
========================================================== */

.issue-item{
  display:flex;
  align-items:flex-start;
  gap:12px;

  padding:10px 0;

  border-bottom:1px solid #f1f5f9;
}

.issue-item:last-child{
  border-bottom:none;
}

.issue-num{
  width:30px;
  height:30px;

  border-radius:50%;

  background:#fee2e2;

  color:#dc2626;

  font-size:13px;
  font-weight:800;

  display:flex;
  align-items:center;
  justify-content:center;

  flex-shrink:0;
}

.issue-text{
  font-size:12.5px;
  line-height:1.6;

  color:#1e293b;
}

/* ==========================================================
   BADGE
========================================================== */

.badge-edit{
  display:inline-flex;
  align-items:center;
  gap:5px;

  padding:5px 12px;

  border-radius:8px;

  border:1px solid #bfdbfe;

  background:#eff6ff;

  color:var(--pln-blue2);

  text-decoration:none;

  font-size:12px;
  font-weight:700;

  transition:background .2s;
}

.badge-edit:hover{
  background:#dbeafe;
}

/* ==========================================================
   WILAYAH TABS
========================================================== */

.wilayah-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;

  margin-bottom:20px;
}

.wilayah-tab{
  padding:8px 18px;

  border-radius:999px;

  border:2px solid #e2e8f0;

  background:#fff;

  color:#64748b;

  font-size:13px;
  font-weight:700;

  cursor:pointer;

  transition:all .2s;
}

.wilayah-tab.active{
  background:var(--pln-blue);

  border-color:var(--pln-blue);

  color:#fff;

  box-shadow:
    0 4px 12px rgba(26,58,110,.25);
}

/* ==========================================================
   TOAST
========================================================== */

.toast-pln{
  position:fixed;

  right:30px;
  bottom:30px;

  z-index:9999;

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

  padding:14px 22px;

  border-radius:12px;

  background:var(--pln-blue);

  color:#fff;

  font-size:14px;
  font-weight:700;

  box-shadow:
    0 8px 24px rgba(26,58,110,.35);

  transform:translateY(80px);

  opacity:0;

  transition:
    all .35s cubic-bezier(.4,0,.2,1);
}

.toast-pln.show{
  transform:translateY(0);
  opacity:1;
}

.toast-pln.success{
  background:
    linear-gradient(
      135deg,
      #16a34a,
      #22c55e
    );
}

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

.form-card,
.section-card,
.info-card{
  animation:fadeUp .35s ease;
}

@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(12px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}


/* SINGLE LINE DIAGRAM */

/* ==========================================================
   SLD
========================================================== */

.sld-wrapper{

    height:100%;
}

.sld-body{

    height:220px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    padding:12px;
}

.sld-image-wrapper{

    width:100%;
    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;
}

.sld-image{

    width:100%;
    height:100%;

    object-fit: cover;

    border-radius:14px;

    cursor:pointer;

    transition:.25s ease;

    box-shadow:
        0 4px 18px rgba(0,0,0,.12);
}

.sld-image:hover{

    transform:scale(1.02);
}



/* ==========================================================
   TIMELINE ALIGN FIX
========================================================== */

.tl-content{

    min-height:82px;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    align-items:center;

    text-align:center;
}

.tl-label{

    min-height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    line-height:1.25;
}

.tl-date{

    min-height:10px;

    display:flex;

    align-items:center;

    justify-content:center;
}
/* end modal sld */

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

@media (max-width:991px){

  .main-sidebar{
    transform:translateX(-100%);
    width:var(--sidebar-width) !important;
  }

  .main-sidebar.show{
    transform:translateX(0);
  }

  .main-content{
    margin-left:0 !important;
    width:100% !important;
  }
}

@media (max-width:767px){

  .main-header{
    padding:12px 16px;
  }

  .header-title{
    font-size:1rem;
  }

  .timeline-wrap{
    padding-bottom:10px;
  }

  .info-card{
    padding:12px;
  }

  .form-card-body,
  .section-body{
    padding:16px;
  }
}

/* select project */


.project-select{
    position:relative;
    width:100%;
}

#projectSearch{
    width:100%;
    height:46px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(10px);
    padding:0 14px;
    color:#fff;
    font-size:14px;
    outline:none;
    transition:.2s;
}

#projectSearch::placeholder{
    color:rgba(255,255,255,.65);
}

#projectSearch:focus{
    border-color:#60a5fa;
    background:rgba(255,255,255,.12);
}

/* DROPDOWN */
.project-dropdown{
    position:absolute;
    top:54px;
    left:0;
    width:100%;

    background:#ffffff;
    border-radius:16px;

    padding:8px;
    max-height:260px;
    overflow-y:auto;

    box-shadow:
        0 10px 30px rgba(0,0,0,.18);

    border:1px solid #e2e8f0;

    z-index:9999;

    display:none;
}

/* ITEM */
.project-item{
    padding:12px 14px;
    border-radius:10px;
    cursor:pointer;

    color:#0f172a;
    font-size:14px;
    font-weight:500;

    transition:.15s;
}

.project-item:hover{
    background:#f1f5f9;
}

/* ACTIVE ITEM */
.project-item.active{
    background:#e2e8f0;
}





/* modal bosstrap z index */
.modal.show {
    z-index: 999999 !important;
}

/* ==========================================================
   PRINT
========================================================== */

@media print{

  body{
    background:#fff;
  }

  .no-print{
    display:none !important;
  }

  #project-map{
    height:220px;
  }
}


/* Import Loading */

.import-loading{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:99999;
}

.import-box{
    background:#fff;
    padding:30px;
    border-radius:16px;
    text-align:center;
    width:300px;
}

.spinner{
    width:50px;
    height:50px;
    border:5px solid #ddd;
    border-top-color:#2563eb;
    border-radius:50%;
    animation:spin 1s linear infinite;
    margin:auto;
    margin-bottom:20px;
}

@keyframes spin{
    to{
        transform:rotate(360deg);
    }
}

.sidebar-user{
    display:flex;
    align-items:center;
    gap:12px;
    padding:15px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.sidebar-user-avatar{
    width:45px;
    height:45px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    color:#fff;
}

.sidebar-user-name{
    color:#fff;
    font-weight:600;
    font-size:14px;
}

.sidebar-user-role{
    color:rgba(255,255,255,.6);
    font-size:12px;
}

/* ==========================================================
   BUDGET SECTION
========================================================== */

.budget-section {

    background: #ffffff;

    border-radius: 18px;

    overflow: hidden;

    border: 1px solid #dbe2ea;

    box-shadow:
        0 4px 14px rgba(15,23,42,.04);
}

/* ==========================================================
   TITLE
========================================================== */

.budget-title {

    padding: 14px 18px;

    font-size: 20px;

    font-weight: 700;

    color: #1e293b;

    border-bottom:
        1px solid #dbe2ea;
}

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

.budget-grid {

    display: flex;

    align-items: stretch;
}

/* ==========================================================
   ITEM
========================================================== */

.budget-item {

    flex: 1;

    text-align: center;

    padding: 16px 12px;

    border-right:
        1px solid #dbe2ea;
}

.budget-item:last-child {

    border-right: none;
}

/* ==========================================================
   ICON
========================================================== */

.budget-icon {

    width: 42px;

    height: 42px;

    object-fit: contain;

    margin-bottom: 10px;
}

/* ==========================================================
   LABEL
========================================================== */

.budget-label {

    font-size: 14px;

    font-weight: 600;

    color: #1e293b;

    min-height: 42px;

    line-height: 1.4;
}

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

.budget-status {

    width: 14px;

    height: 14px;

    border-radius: 50%;

    margin:
        12px auto 0;
}

/* ==========================================================
   STATUS COLOR
========================================================== */

.budget-status.selesai {

    background: #22c55e;
}

.budget-status.proses {

    background: #f59e0b;
}

.budget-status.belum {

    background: #e2e8f0;

    border:
        1px solid #cbd5e1;
}

/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:768px){

    .budget-grid {

        flex-wrap: wrap;
    }

    .budget-item {

        width: 50%;

        flex: unset;

        border-bottom:
            1px solid #dbe2ea;
    }
}


/* ==========================================================
   BUDGET TIMELINE
========================================================== */

.budget-timeline {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    position: relative;

    gap: 10px;
}

/* ==========================================================
   LINE
========================================================== */

.budget-timeline::before {

    content: '';

    position: absolute;

    top: 28px;

    left: 6%;

    right: 6%;

    height: 2px;

    background:
        repeating-linear-gradient(
            to right,
            #cbd5e1 0,
            #cbd5e1 6px,
            transparent 6px,
            transparent 12px
        );
}

/* ==========================================================
   STEP
========================================================== */

.budget-step {

    flex: 1;

    position: relative;

    text-align: center;

    z-index: 2;
}

/* ==========================================================
   ICON
========================================================== */

.budget-step-icon {

    width: 56px;

    height: 56px;

    border-radius: 50%;

    background: #ffffff;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: center;
}

/* ==========================================================
   IMAGE
========================================================== */

.budget-image {

    width: 38px;

    height: 38px;

    object-fit: contain;
}

/* ==========================================================
   LABEL
========================================================== */

.budget-step-label {

    margin-top: 10px;

    font-size: 13px;

    font-weight: 600;

    line-height: 1.4;

    color: #1e293b;

    min-height: 38px;
}

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

.budget-status {

    margin-top: 10px;

    font-size: 14px;
}

.budget-status.selesai {

    color: #22c55e;
}

.budget-status.proses {

    color: #f59e0b;
}

.budget-status.belum {

    color: #cbd5e1;
}