/* Dashboard admin — kemas dan padat, bukan untuk budak */

body.admin {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #f6f4ee;
  background-image: none;
}

body.admin main { max-width: 1080px; padding-bottom: 80px; }

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 12px 8px;
}
.admin-header h1 { color: #264653; font-size: 1.4rem; text-shadow: none; }

.tabs { display: flex; gap: 6px; }
.tab-btn {
  font-family: inherit;
  font-size: .95rem;
  border: 2px solid #ddd;
  background: #fff;
  border-radius: 10px;
  padding: 6px 14px;
  cursor: pointer;
  color: #555;
}
.tab-btn.active { background: #264653; border-color: #264653; color: #fff; }

.summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 10px 0 16px;
}
.stat {
  background: #fff;
  border: 1px solid #e5e0d5;
  border-radius: 14px;
  padding: 14px;
  text-align: center;
}
.stat b { display: block; font-size: 1.8rem; color: #2a9d8f; }
.stat span { color: #888; font-size: .85rem; }

.panel {
  background: #fff;
  border: 1px solid #e5e0d5;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
}
.panel h2 { font-size: 1.05rem; color: #264653; margin-bottom: 12px; }

.inline-form { display: flex; gap: 8px; flex-wrap: wrap; }
.inline-form input {
  font-family: inherit;
  font-size: .95rem;
  padding: 8px 10px;
  border: 2px solid #ddd;
  border-radius: 10px;
  outline: none;
  flex: 1;
  min-width: 120px;
}
.inline-form input:focus { border-color: #2a9d8f; }

.grid-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  align-items: end;
}
.grid-form label { font-size: .85rem; color: #666; display: flex; flex-direction: column; gap: 4px; }
.grid-form input, .grid-form select {
  font-family: inherit;
  font-size: .95rem;
  padding: 8px 10px;
  border: 2px solid #ddd;
  border-radius: 10px;
  outline: none;
}
.grid-form input:focus, .grid-form select:focus { border-color: #2a9d8f; }
.params { display: contents; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #eee; white-space: nowrap; }
th { color: #888; font-weight: 600; font-size: .8rem; text-transform: uppercase; }
td code { font-size: .75rem; color: #999; }
tr.inactive td { opacity: .5; }
.detail-link { color: #2a9d8f; font-weight: 600; text-decoration: none; }
.detail-link:hover { text-decoration: underline; }

body.admin .big-btn { margin-top: 0; box-shadow: 0 3px 0 #1f7268; }
body.admin .login-card { border-color: #264653; box-shadow: none; }
body.admin .login-card h1 { color: #264653; }

/* ===== Dashboard ibu bapa ===== */

.tabs.center { justify-content: center; margin-bottom: 14px; }
.auth-form { display: flex; flex-direction: column; gap: 10px; }
.hint-line { font-size: .85rem; color: #888; margin-bottom: 10px; }
.empty-note { text-align: center; color: #888; }

.children-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.child-card { margin-bottom: 0; display: flex; flex-direction: column; gap: 10px; }
.child-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.child-head h2 { margin-bottom: 0; }
.child-head small { color: #999; font-weight: normal; font-size: .8rem; }
.child-streak { color: #bbb; font-weight: bold; white-space: nowrap; }
.child-streak.hot { color: #e76f51; }
.child-mission { display: flex; flex-direction: column; gap: 5px; font-size: .9rem; color: #555; }
.done-tag { color: #2a9d8f; margin-left: 6px; }
.child-stats { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: .82rem; color: #888; }
.child-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border-top: 1px solid #eee;
  padding-top: 10px;
  font-size: .85rem;
  color: #666;
}
.child-actions select {
  font-family: inherit;
  padding: 4px 8px;
  border: 2px solid #ddd;
  border-radius: 8px;
}
.child-ic { margin-left: auto; color: #bbb; font-size: .78rem; }

body.parent .bar { height: 12px; background: #eee; border-radius: 8px; overflow: hidden; }
body.parent .bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #f4a261, #e9c46a);
  transition: width .5s;
}
body.parent .bar-fill.full { background: linear-gradient(90deg, #2a9d8f, #52b788); }
body.parent .parent-link { text-align: center; }

/* ===== Laporan 7 hari ===== */

.week-stats {
  display: flex;
  gap: 8px 18px;
  flex-wrap: wrap;
  font-size: .9rem;
  color: #555;
  margin-bottom: 12px;
}
.week-stats b { color: #2a9d8f; }

.week-bars {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  height: 140px;
  padding: 0 4px 4px;
  margin-bottom: 16px;
  border-bottom: 2px solid #eee;
}
.week-day {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  max-width: 70px;
}
.bar-count { font-size: .8rem; color: #888; min-height: 1rem; }
.bar-col {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
  background: #f6f4ee;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}
.bar-col-fill {
  width: 100%;
  background: linear-gradient(180deg, #52b788, #2a9d8f);
  border-radius: 8px 8px 0 0;
  transition: height .5s;
}
.week-day.today .bar-col-fill { background: linear-gradient(180deg, #f4a261, #e76f51); }
.bar-label { font-size: .75rem; color: #999; }
.week-day.today .bar-label { color: #e76f51; font-weight: bold; }

.pay-btn { width: 100%; font-size: 1.1rem; }

.check-label { flex-direction: row !important; align-items: center; gap: 8px !important; }
.check-label input { width: 18px; height: 18px; }

.premium-panel {
  border: 2px solid #e9c46a;
  background: linear-gradient(135deg, #fffaf0, #fff);
}
.premium-panel.active { border-color: #2a9d8f; background: linear-gradient(135deg, #f0faf8, #fff); }
.premium-panel h2 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.premium-panel .price { color: #e76f51; font-size: 1.4rem; }
.premium-panel small { color: #999; font-weight: normal; }
.premium-list { list-style: none; margin: 10px 0; display: flex; flex-direction: column; gap: 6px; font-size: .95rem; color: #444; }
.premium-how { font-size: .85rem; color: #888; border-top: 1px dashed #eee; padding-top: 10px; }

.edit-form {
  border-top: 2px dashed #eee;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.edit-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.edit-actions .del-child { margin-left: auto; }
.edit-form .error { margin-top: 0; min-height: 0; }