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

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Base */
body {
  font-family: 'Poppins', sans-serif;
  background: linear-gradient(135deg, #eef2f7, #e6e9f0);
  min-height: 100vh;
  padding: 40px 20px;
  color: #2c3e50;
}

/* Judul */
h2 {
  text-align: center;
  margin-bottom: 30px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

h2::before {
  content: "📋 ";
}

h2::after {
  content: " ✓";
}

/* Card Form */
form {
  background: linear-gradient(180deg, #ffffff, #f9fbff);
  max-width: 960px;
  margin: 0 auto 35px auto;
  padding: 25px;
  border-radius: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  border-top: 4px solid #6c8cff;
}

/* Input */
input,
select {
  padding: 11px 12px;
  border-radius: 8px;
  border: 1px solid #d0d7e2;
  font-size: 14px;
  background-color: #fdfefe;
  transition: 0.2s;
}

input:focus,
select:focus {
  outline: none;
  border-color: #6c8cff;
  box-shadow: 0 0 0 3px rgba(108, 140, 255, 0.2);
}

/* Tombol */
button {
  background: linear-gradient(135deg, #6c8cff, #8a6cff);
  color: #ffffff;
  border: none;
  border-radius: 9px;
  padding: 11px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: 0.2s;
}

button::before {
  content: "💾 ";
}

button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(108, 140, 255, 0.4);
}

/* Table Card */
table {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  border-collapse: collapse;
  background-color: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* Table Head */
thead {
  background: linear-gradient(135deg, #6c8cff, #8a6cff);
  color: #ffffff;
}

th,
td {
  padding: 14px;
  text-align: center;
  font-size: 14px;
}

tbody tr {
  transition: background-color 0.2s;
}

tbody tr:hover {
  background-color: #f1f4ff;
}

tbody tr:nth-child(even) {
  background-color: #fafbff;
}

/* Status badge */
.hadir,
.izin,
.alpha {
  font-weight: 600;
  border-radius: 20px;
  padding: 6px 10px;
  display: inline-block;
}

.hadir {
  background-color: #d4f3e0;
  color: #1e7e34;
}

.hadir::before {
  content: "✅ ";
}

.izin {
  background-color: #fff0cc;
  color: #946200;
}

.izin::before {
  content: "📝 ";
}

.alpha {
  background-color: #fde0e3;
  color: #8a1c2b;
}

.alpha::before {
  content: "❌ ";
}

/* Responsive */
@media (max-width: 600px) {
  body {
    padding: 25px 12px;
  }

  th,
  td {
    padding: 10px;
    font-size: 13px;
  }
}