/* =====================================================
   CHECK-IN HISTORY – SCOPED FIX
===================================================== */

#checkinHistoryView .checkin-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

#checkinHistoryView .checkin-header {
  display: none;
}

/* ================= MOBILE ================= */

#checkinHistoryView .checkin-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  font-size: 14px;
}

#checkinHistoryView .checkin-top {
  display: grid;
  grid-template-columns: 45% 30% 25%;
  gap: 8px;
  align-items: center;
}

#checkinHistoryView .checkin-top > div {
  display: flex;
  align-items: center;   /* 🔥 căn giữa theo chiều dọc trong ô */
}

#checkinHistoryView .checkin-desc {
  font-size: 14px;
  color: #444;
}

#checkinHistoryView .checkin-status {
  font-weight: 600;
}

#checkinHistoryView .checkin-status.CHO_DUYET { color: #f57c00; }
#checkinHistoryView .checkin-status.DA_DUYET  { color: #2e7d32; }
#checkinHistoryView .checkin-status.TU_CHOI   { color: #d32f2f; }
#checkinHistoryView .checkin-status.DA_HUY    { color: #9e9e9e; }

/* ================= DESKTOP ================= */

@media (min-width: 1024px) {

  #checkinHistoryView .checkin-header {
    display: grid;
    grid-template-columns: 200px 140px 160px 1fr;
    padding: 10px 12px;
    font-weight: 700;
    font-size: 13px;
    color: #555;
    border-bottom: 2px solid #ddd;
  }

  #checkinHistoryView .checkin-item {
    display: grid;
    grid-template-columns: 200px 140px 160px 1fr;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid #eee;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  #checkinHistoryView .checkin-top {
    display: contents;
  }
}

/* Đẩy filter sang phải hoàn toàn */
#checkinHistoryView .header-spacer {
  flex: 1;
}


/* =====================================================
   CHECKIN TOOLBAR (OVERRIDE SYSTEM)
===================================================== */

#checkinHistoryView .checkin-toolbar {
  display: flex;
  justify-content: flex-start;   /* luôn canh trái */
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

/* Chuẩn hóa kích thước nút trong toolbar */
#checkinHistoryView .checkin-toolbar button {
  padding: 8px 14px;
  font-size: 14px;
  border-radius: 8px;
  min-width: auto;
  margin-top: 0;
}

/* Nếu sau này có thêm nút phụ */
#checkinHistoryView .checkin-toolbar .btn-secondary {
  background: #e0e0e0;
  color: #333;
}