/* =====================================================
   INDEX-STATS.CSS
   Statistik & Chart halaman publik DLH Bombana
   Palet: soft / pastel — tidak mencolok
===================================================== */

:root {
  --is-green   : #4a7c59;
  --is-blue    : #5b8db8;
  --is-orange  : #c4855a;
  --is-yellow  : #b8963e;
  --is-teal    : #4a8a7e;
  --is-mint    : #5fa37a;

  --is-bg-green   : #eef5f0;
  --is-bg-blue    : #eef3f9;
  --is-bg-orange  : #f8f0ea;
  --is-bg-yellow  : #faf5e8;
  --is-bg-teal    : #edf5f3;
  --is-bg-mint    : #edf6f0;

  --is-text-dark  : #2d3a32;
  --is-text-mid   : #5a6b60;
  --is-text-light : #8a9e90;

  --is-border     : #dde8e0;
  --is-white      : #ffffff;
  --is-shadow     : 0 2px 10px rgba(0,0,0,.06);
  --is-radius     : 12px;
}

/* =====================================================
   STAT CARDS
===================================================== */

.pub-stat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}

.pub-stat-card {
  background: var(--is-white);
  border-radius: var(--is-radius);
  padding: 16px 12px;
  box-shadow: var(--is-shadow);
  border: 1px solid var(--is-border);
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}

.pub-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 16px rgba(0,0,0,.09);
}

/* Aksen strip kiri — lebih subtle dari border bawah */
.pub-stat-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
}

.c-total::before       { background: var(--is-green);  }
.c-tunggu::before      { background: var(--is-yellow); }
.c-proses::before      { background: var(--is-blue);   }
.c-penangan::before    { background: var(--is-orange); }
.c-selesai::before     { background: var(--is-mint);   }
.c-penyelesaian::before{ background: var(--is-teal);   }

/* Icon background sesuai warna bidang */
.pub-stat-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-total       .pub-stat-icon { background: var(--is-bg-green);  }
.c-tunggu      .pub-stat-icon { background: var(--is-bg-yellow); }
.c-proses      .pub-stat-icon { background: var(--is-bg-blue);   }
.c-penangan    .pub-stat-icon { background: var(--is-bg-orange); }
.c-selesai     .pub-stat-icon { background: var(--is-bg-mint);   }
.c-penyelesaian .pub-stat-icon{ background: var(--is-bg-teal);   }

.pub-stat-body h3 {
  font-size: 26px;
  font-weight: 700;
  color: var(--is-text-dark);
  letter-spacing: -.5px;
  line-height: 1;
}

.pub-stat-body p {
  font-size: 11px;
  color: var(--is-text-mid);
  margin-top: 4px;
  font-weight: 500;
  white-space: nowrap;
}

/* =====================================================
   PROGRESS BAR
===================================================== */

.pub-progress-wrap {
  background: var(--is-white);
  border-radius: var(--is-radius);
  padding: 16px 18px;
  box-shadow: var(--is-shadow);
  border: 1px solid var(--is-border);
  margin-bottom: 18px;
}

.pub-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 9px;
}

.pub-progress-header span {
  font-size: 13px;
  font-weight: 500;
  color: var(--is-text-mid);
}

.pub-progress-header strong {
  font-size: 18px;
  font-weight: 700;
  color: var(--is-green);
}

.pub-progress-bar-bg {
  width: 100%;
  height: 8px;
  background: var(--is-bg-green);
  border-radius: 99px;
  overflow: hidden;
}

.pub-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--is-green), var(--is-mint));
  border-radius: 99px;
  transition: width .8s cubic-bezier(.4,0,.2,1);
  width: 0%;
}

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

.pub-chart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.pub-chart-card {
  background: var(--is-white);
  border-radius: var(--is-radius);
  padding: 18px;
  box-shadow: var(--is-shadow);
  border: 1px solid var(--is-border);
}

.pub-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.pub-chart-header h3 {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--is-text-dark);
}

.pub-chart-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--is-text-mid);
  background: var(--is-bg-green);
  border: 1px solid var(--is-border);
  padding: 2px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.pub-chart-wrap {
  position: relative;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pub-chart-wrap canvas {
  max-width: 100% !important;
}

/* =====================================================
   LEGEND
===================================================== */

.pub-legend {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pub-legend-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
}

.pub-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: .85;
}

.pub-legend-label {
  flex: 1;
  color: var(--is-text-mid);
}

.pub-legend-val {
  font-weight: 600;
  color: var(--is-text-dark);
  min-width: 20px;
  text-align: right;
}

.pub-legend-pct {
  color: var(--is-text-light);
  min-width: 32px;
  text-align: right;
}

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

@media (max-width: 1100px) {
  .pub-stat-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .pub-stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .pub-chart-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .pub-stat-card {
    padding: 12px 10px;
  }
  .pub-stat-body h3 {
    font-size: 22px;
  }
  .pub-stat-icon {
    width: 32px;
    height: 32px;
    font-size: 17px;
  }
}