.kdpa-wrapper {
  font-family: 'Poppins', Arial, sans-serif;
  background: #ffffff;
  padding: 20px;
  border-radius: 8px;
  max-width: 1100px;
  color: #0b1f54;
}

.kdpa-header h1 {
  font-size: 34px;
  font-weight: 700;
  color: #0b1f54;
  margin-bottom: 5px;
}

.kdpa-sub {
  font-size: 20px;
  color: #555;
  margin-bottom: 20px;
}

.kdpa-upload {
  margin-bottom: 15px;
}

.kdpa-btn {
  background: #ffd84d;
  color: #0b1f54;
  border: none;
  padding: 12px 16px;
  font-size: 18px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
}

.kdpa-btn:hover {
  background: #ffcc00;
}

.kdpa-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.kdpa-card {
  flex: 1 1 150px;
  background: #f8f8f8;
  padding: 14px;
  border-radius: 6px;
  text-align: center;
}

.kdpa-card-title {
  font-size: 18px;
  color: #0b1f54;
  font-weight: 500;
}

.kdpa-card-val {
  font-size: 28px;
  font-weight: 700;
  margin-top: 8px;
}

.kdpa-controls {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.kdpa-controls label {
  font-size: 18px;
}

.kdpa-controls input,
.kdpa-controls select {
  padding: 8px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.kdpa-charts {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.kdpa-chart-card {
  flex: 1 1 480px;
  background: #ffffff;
  border: 1px solid #eee;
  padding: 14px;
  border-radius: 6px;
}

.kdpa-chart-card h4 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #0b1f54;
}

.kdpa-outliers {
  margin-top: 20px;
  padding: 12px;
  background: #fff8dc;
  border: 1px solid #ffd84d;
  border-radius: 6px;
}

@media (max-width: 700px) {
  .kdpa-card { flex: 1 1 45%; }
}


/* ==== Custom Styling Update ==== */

/* Font settings */
body {
    font-family: 'Poppins', 'Open Sans', sans-serif;
    font-size: 1.2em;
    background-color: #ffffff;
    color: #0b1f54;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', 'Montserrat', sans-serif;
    font-weight: bold;
    color: #0b1f54;
}

/* Buttons */
button, .btn {
    background-color: #ffd84d;
    color: #0b1f54;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 1.1em;
}

/* Cards & dashboard boxes */
.card, .dashboard-box {
    background-color: #f8f8f8;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* Highlight angka / statistik */
.highlight-number {
    color: #ffd84d;
    font-weight: bold;
}

/* Spacing improvements */
.container, .content {
    padding: 20px;
}

p {
    line-height: 1.6;
}

/* ==== End Custom Styling ==== */