/* Font dan warna asas */
body {
  font-family: 'Poppins', sans-serif;
  background-color: #f7f7fa;
  margin: 0;
  padding: 20px;
  color: #333;
}

.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 15px;
  box-sizing: border-box;
}

/* Tajuk utama */
h1 {
  color: #1a237e;
  font-size: 1.8rem;
  margin-bottom: 20px;
}

/* Input Carian */
input[type="text"] {
  width: 100%;
  max-width: 600px;
  padding: 12px 16px;
  height: 48px;
  font-size: 16px;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-bottom: 20px;
  box-sizing: border-box;
  line-height: 1.5;
}

input[type="text"]::placeholder {
  font-size: 16px;
  color: #aaa;
}

/* Responsif */
@media (max-width: 600px) {
  input[type="text"] {
    width: 100%;
  }

  .menu-container {
    flex-direction: column;
  }
}

/* Susunan Butang Menu */
.menu-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 30px 0;
  justify-content: center;
}

/* Semua Butang Menu */
.menu-btn {
  padding: 12px 18px;
  font-size: 15px;
  font-family: 'Poppins', sans-serif;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Warna butang */
#btnBawah2 { background-color: #c62828; }
#btnBawah2:hover { background-color: #b71c1c; }

#btnPAM { background-color: #f39c12; }
#btnPAM:hover { background-color: #e67e22; }

#btnSenaraiPenuh { background-color: #2980b9; }
#btnSenaraiPenuh:hover { background-color: #2471a3; }

#btnEmpatPenuh,
#btnTiada3P { background-color: #27ae60; }
#btnEmpatPenuh:hover,
#btnTiada3P:hover { background-color: #219150; }

#btnRumusan { background-color: #8e44ad; }
#btnRumusan:hover { background-color: #7b2fa0; }

/* Senarai carian */
ul#senarai {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 20px;
}

ul#senarai li {
  background-color: #ffffff;
  padding: 8px 12px;
  margin-bottom: 6px;
  border: 1px solid #ddd;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

ul#senarai li:hover {
  background-color: #eef3ff;
}

/* Kad maklumat pelajar */
.card {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  padding: 20px;
  margin-bottom: 15px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: scale(1.01);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.card p {
  margin: 8px 0;
  line-height: 1.5;
}

/* Memo Kelayakan */
.memo {
  padding: 15px 20px;
  margin: 20px auto;
  border-left: 6px solid;
  background-color: #fff;
  border-radius: 8px;
  font-size: 16px;
  max-width: 800px;
}

.merah { border-color: #d32f2f; color: #d32f2f; }
.hijau { border-color: #388e3c; color: #388e3c; }

/* Paparan keputusan */
#keputusan {
  display: none;
}

/* Semua seksyen senarai dan rumusan */
#senaraiGagal,
#senaraiAmTidakCukup,
#senaraiPenuh,
#senaraiEmpatPenuh,
#senaraiTiada3P,
#rumusan {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px 25px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  margin: 30px 0;
  width: 100%;
  box-sizing: border-box;
}

/* Tajuk seksyen */
#senaraiGagal h3 { color: #d32f2f; }
#senaraiAmTidakCukup h3 { color: #d35400; }
#senaraiPenuh h3 { color: #2980b9; }
#senaraiEmpatPenuh h3,
#senaraiTiada3P h3 { color: #27ae60; }
#rumusan h3 {
  color: #8e24aa;
  font-size: 1.3rem;
  margin-bottom: 12px;
}

#senaraiGagal h3,
#senaraiAmTidakCukup h3,
#senaraiPenuh h3,
#senaraiEmpatPenuh h3,
#senaraiTiada3P h3 {
  margin-top: 0;
  font-size: 1.2rem;
}

/* Jumlah paparan senarai */
#jumlahPelajar,
#jumlahAm,
#jumlahPenuh,
#jumlahEmpatPenuh,
#jumlahTiada3P {
  font-weight: 600;
  margin-bottom: 10px;
  color: #444;
}

/* Senarai Rumusan */
#rumusanList {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
  width: 100%;
}

#rumusanList li {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 1rem;
  border-bottom: 1px dashed #ddd;
  word-break: break-word;
  gap: 15px;
  flex-wrap: wrap;
}

#rumusanList li:last-child {
  border-bottom: none;
}

#rumusan strong {
  font-weight: 600;
  color: #000;
}

input[type="text"] {
  font-family: 'Poppins', sans-serif;
}

p {
  margin-bottom: 8px;
}

p strong {
  display: inline-block;
  width: 150px; /* boleh laras ikut panjang label */
  font-weight: 600;
  color: #222;
}

span.nilai {
  display: inline-block;
  color: #333;
}