/* Import Font Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* Body */
body {
  font-family: "Poppins", sans-serif;
  background: #f8f9fa;
  padding: 30px;
  color: #333;
  line-height: 1.6;
}

/* Container */
.container {
  background: #fff;
  max-width: 650px;
  margin: auto;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

/* Logo */
.logo-container {
  text-align: center;
  margin-bottom: 20px;
}
.logo-container img {
  max-width: 160px;
  height: auto;
}

/* Heading */
h1, h2 {
  text-align: center;
  margin-bottom: 20px;
  font-weight: 600;
  color: #222;
}

/* Form Styling */
form label {
  display: block;
  margin-top: 15px;
  font-weight: 500;
  color: #444;
}

form input,
form select,
form button {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 15px;
  font-family: "Poppins", sans-serif;
}

form button {
  background: #86b854;
  color: white;
  border: none;
  margin-top: 20px;
  cursor: pointer;
  transition: background 0.3s ease;
  font-weight: 500;
}

form button:hover {
  background: #679044;
}

/* Hasil Perhitungan */
.hasil, .result {
  margin-top: 30px;
  padding: 20px;
  background: #f1f8ff;
  border: 1px solid #cce5ff;
  border-radius: 8px;
  font-size: 14px;
}

/* Tombol Cetak */
.btn-print {
  margin-top: 15px;
  background: #28a745;
  color: #fff;
  padding: 10px 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
}
.btn-print:hover {
  background: #218838;
}

/* Status Gizi Warna */
.bg-merah { background:#f8d7da; }
.bg-hijau { background:#d4edda; }
.bg-orange { background:#fff3cd; }

.status-sd { font-weight: 600; }
.sd-min-3, .sd-plus-3 { color: #b30000; }
.sd-min-2, .sd-plus-2 { color: #ff0000; }
.sd-min-1, .sd-plus-1 { color: #ffa500; }
.sd-median { color: #28a745; }

/* Tombol Admin */
.btn-logout,
.btn-export {
  padding: 8px 14px;
  font-size: 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 10px;
  color: #fff;
  transition: background 0.3s ease;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
}

.btn-logout { background-color: #dc3545; float: right; }
.btn-logout:hover { background-color: #c82333; }

.btn-export { background-color: #86b854; margin-right: 10px; }
.btn-export:hover { background-color: #679044; }

/* Table Styling */
table.dataTable {
  width: 100% !important;
}

table {
  width: 100%;
  margin-top: 1.5rem;
  border-collapse: collapse;
  font-size: 14px;
}
th, td {
  border: 1px solid #ddd;
  padding: 0.75rem;
  text-align: center;
}
th {
  background-color: #f9f9f9;
  font-weight: 600;
}

body {font-family:'Poppins',sans-serif;background:#f8f9fa;padding:20px;}
    .container {background:#fff;max-width:650px;margin:auto;padding:30px;border-radius:12px;box-shadow:0 0 10px rgba(0,0,0,0.1);}
    .logo-container {text-align:center;margin-bottom:15px;}
    .logo-container img {max-width:160px;height:auto;}
    button {background:#86b854;color:white;padding:10px;border:none;border-radius:6px;margin-top:15px;cursor:pointer;width:100%;}
    button:hover {background:#679044;}
    table {width:100%;margin-top:1.5rem;border-collapse:collapse;font-size:14px;}
    th,td {border:1px solid #ddd;padding:8px;text-align:center;}
    th {background-color:#f9f9f9;}
    input,select {width:100%;padding:8px;margin:5px 0 15px;border:1px solid #ccc;border-radius:6px;}
    .hasil {margin-top:20px;padding:15px;background:#f1f8ff;border:1px solid #cce5ff;border-radius:8px;}
    .bg-merah {background:#f8d7da;}
    .bg-hijau {background:#d4edda;}
    .bg-orange {background:#fff3cd;}

/* ---------------------------
   Bagian Penjelasan Z-Score
---------------------------- */
.zscore-info {
  margin-top: 25px;
  padding: 20px;
  background: #f9fff9;
  border: 1px solid #c8e6c9;
  border-radius: 10px;
  font-family: 'Poppins', sans-serif;
  color: #2e4631;
  line-height: 1.6;
  font-size: 15px;
}

.zscore-info h3 {
  color: #1b5e20;
  margin-top: 15px;
  margin-bottom: 10px;
  font-size: 18px;
}

.zscore-info p {
  font-size: 14px;
  margin-bottom: 10px;
}

.zscore-info a {
  color: #86b854;
  text-decoration: underline;
  font-weight: 600;
}

.zscore-info ul {
  margin: 5px 0 10px 18px;
  font-size: 14px;
}

.rumus-box {
  background: #eef5ff;
  padding: 10px;
  border-left: 4px solid #86b854;
  border-radius: 4px;
  font-family: monospace;
  margin: 5px 0 10px;
  word-wrap: break-word;
  font-size: 14px;
}

.zscore-info table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 15px;
  font-size: 14px;
  background: #ffffff;
}

.zscore-info table th {
  background-color: #dff0d8;
  color: #1b5e20;
  font-weight: 600;
}

.zscore-info table th,
.zscore-info table td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: center;
  word-break: break-word;
}

.zscore-info table tbody tr:nth-child(even) {
  background-color: #f6f6f6;
}

.zscore-info table tbody tr:hover {
  background-color: #e9f5e9;
}

/* ---------------------------
   Responsif Mobile
---------------------------- */
@media (max-width: 600px) {
  .zscore-info {
    padding: 14px;
    font-size: 12px;
  }
  .zscore-info h3 {
    font-size: 13px;
  }
  .zscore-info p,
  .zscore-info ul {
    font-size: 10px;
  }
  .rumus-box {
    font-size: 12px;
    padding: 8px;
  }
  .zscore-info table {
    font-size: 12px;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  .zscore-info table th,
  .zscore-info table td {
    padding: 6px;
    font-size: 12px;
  }
}

/* ---------------------------
   Responsif Extra Kecil (≤ 400px)
---------------------------- */
@media (max-width: 400px) {
  .zscore-info {
    padding: 12px;
    font-size: 10px;
  }
  .zscore-info h3 {
    font-size: 12px;
  }
  .zscore-info table {
    font-size: 11.5px;
  }
}